使用 ajax 成功和 setTimeout 在页面刷新后显示 bootstrap 模态

Question

我试图在 jQuery ajax 请求的成功函数页面刷新后显示 bootstrap 模式。我认为发生的事情是，一旦页面刷新，setTimeout 就会被擦除，因此它永远不会触发。我需要页面刷新内容，但也想为用户提供一个对话框，显示发生了什么。

这是我的代码：

$.ajax({
            type: "POST",
            url: '@Url.Action("UpdateVideoUrl", "ManageVideos")',
            data: JSON.stringify(model),
            contentType: 'application/json',
            success: function () {
                location.reload(true);
                $(window).scrollTop(0);
                setTimeout(function () {
                    $("#SuccessModal").modal('show');
                }, 200);

            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(textStatus + ": " + errorThrown + "." + "  Please see above if applicable");
            }
        });

如果我将超时设置为 100，模态将开始显示并且页面会刷新，我将丢失模态。有没有办法完成这个任务？

Answer 1

我意识到我需要显示模态，而不是刷新页面然后显示模态，当模态关闭时，触发 location.reload(true) 和 .animate 命令：

//Put page to on refresh
$(document).ready(function () {
    $("html,body").animate({ scrollTop: 0 }, 100); //100ms for example
});

//Refresh page after modal dialog is closed
function ReloadPage() {
    location.reload(true);
}

使用 ajax 成功和 setTimeout 在页面刷新后显示 bootstrap 模态

Display bootstrap modal after page refresh using ajax success and setTimeout

ajax

jquery

twitter-bootstrap

bootstrap-modal