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

有两个错误。

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

其次，如果要显示模态，则需要使用 $("#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>

Bootstrap Modal 弹出窗口未显示在索引页面上

1 个答案: