引导模式弹出窗口未显示在索引页面上

Question

嗨，我有一个 ajax 调用，当我在加载的地图上单击位置时，它会在用户登录时显示我的模式弹出窗口，但是当用户未授权/未登录应用程序时，它应该跳转到错误：加入 ajax 并显示一个简单的模式弹出窗口，但在开发工具中没有显示“加载资源失败：服务器响应状态为 401 ()”并且未显示弹出窗口，我尝试重定向到随机页面错误：部分，它成功将我带到页面，但简单模式无法显示，我尝试了所有来源但没有任何帮助，我需要的是当用户在未登录时单击该位置以显示简单模式向他们显示他们首先必须登录的消息。请您帮忙，谢谢。

这是我的html

<!-- Modal -->
<div class="modal fade" id="authorisationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="authcontent">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

这是我的 ajax 调用

            $.ajax({
                type: "GET",
                url: "/GetOrchardLocation/" + id,
                success: function (res) {
                    console.log(res);
                    if (res != null) {
                        $.ajax({
                            type: "GET",
                            url: "/Home/ShowWeatherPop?locationId=" + res.id + "&page=" + jumpDays,
                            success: function (res) {
                                $("#weatherPopupDiv").html(res);
                                showMap(regionName);
                            },//works fine until here


                           The problem is this part
                            error: $('#authorisationModal').on('shown.bs.modal', function () {
                                $('#authcontent').trigger('focus')

                            // this below works fine and redirects to the page for example
                             //window.location.replace("/Home/AccessDenied");
                            })
                        })
                    }
                }
            })

        } else {
            $.ajax({
                type: "GET",
                url: "/Home/ShowWeatherPop?locationId=" + locationId + "&page=" + jumpDays,
                success: function (res) {
                    $("#weatherPopupDiv").html(res);
                    showMap(regionName);
                },
                error: $('#authorisationModal').on('shown.bs.modal', function () {
                    $('#authcontent').trigger('focus')
                })
            })
        }

Answer 1

有两个错误。

首先，您需要在您的error 方法中传递一个function(){}。

其次，如果要显示模态，则需要使用$("#authorisationModal").modal("show");来代替。

const id = 1;
$.ajax({
  type: "GET",
  url: "/GetOrchardLocation/" + id,
  success: function (res) {
    console.log(res);
    if (res != null) {
      $.ajax({
        type: "GET",
        url: "/Home/ShowWeatherPop?locationId=" + res.id + "&page=" + jumpDays,
        success: function (res) {
          $("#weatherPopupDiv").html(res);
          showMap(regionName);
        },
        error: function () {
          console.log("error1");
          $("#authorisationModal").modal("show");
        },
      });
    }
  },
  error: function () {
    console.log("error2");
    $("#authorisationModal").modal("show");
  },
});

<link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div
      class="modal fade"
      id="authorisationModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content" id="authcontent">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">...</div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>