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

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')
                })
            })
        }

标签： javascriptajaxasp.net-mvctwitter-bootstrap

Answer 1

有两个错误。

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

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