在ajaxStart(）上打开jquery移动弹出窗口

opening jquery mobile popup on ajaxStart()

本文关键字：移动 jquery 窗口 ajaxStart      更新时间：2023-09-26

我想在ajaxStart上显示一个循环加载程序。我使用了一个弹出窗口，这样背景就会淡出并变为非活动状态。也就是说，如果有其他方法可以实现这一点（而不是使用弹出窗口），我也愿意尝试一下。

问题是，虽然包含AJAX调用的同一个函数在页面加载和按钮单击时都执行，但加载程序只在页面加载时第一次出现。我放了一些控制台日志，并验证了ajaxStart和ajaxComplete确实被触发了，但当点击按钮后进行AJAX调用时，弹出窗口无法打开。

JavaScript:

$(document).ready(function(){
    $( document ).ajaxStart(function() {
        $("#loader").html("<img src='../images/ajax-loader.gif'/>").popup("open");
    }).ajaxComplete(function() {
        $("#loader").popup("close");
    });
    // do other stuff
    loadData();
    $("#button").click(function(){
        loadData(); 
    });
});
function loadData(){
     //make an ajax call to fetch data
}

HTML:

<div data-role="popup" data-shadow="false" data-corners="false" class="loader1" 
  id="loader" data-overlay-theme="a" data-theme="none" data-dismissible="false" >
</div>

问题可能是什么，或者是否有其他解决方案可以达到预期的结果？

首先，简单的回答是：jQuery Mobile一次只支持一个活动弹出窗口（目前）。文件上写着：

注意：不允许链接弹出窗口
该框架当前没有支持弹出窗口的链接，因此无法从一个弹出到另一个弹出。包含data-rel="popup"的所有链接弹出窗口将不会做任何事情。

我在过去遇到过几次这个问题，不得不破解它。以下代码是我目前使用的解决方案，到目前为止运行得很好（使用jQuery Mobile 1.3.2）：

$(document).on("mobileinit", function() {
    $.widget("mobile.popup", $.mobile.popup, {
        _trigger: function(type, event, data) {
            return this._suspended ? undefined : this._super(type, event, data);
        },
        _openPrereqsComplete: function() {
            this._super();
            delete this._suspended;
        },
        open: function(options) {
            var activePopup = $.mobile.popup.active;
            if (activePopup) {
                activePopup._suspended = true;
                activePopup._close(true);
                this.element.one("popupafterclose", function() {
                    activePopup.open();
                });
            }
            this._super(options);
        }
    });
});

简而言之，该代码在适当的位置扩展了弹出窗口小部件，以引入"挂起"状态。如果弹出窗口小部件处于该状态，则所有事件都将静音。

然后，open()方法过载以检测另一个弹出窗口是否已经激活。如果是这种情况，它会暂停并关闭该弹出窗口（不执行任何动画，因此它会立即关闭），然后打开新的弹出窗口，并在关闭新的弹出菜单时安排取消暂停并重新打开前一个弹出窗口。

请注意，代码绑定到mobileinit事件，因此它必须在包含jQuery之后运行，但在包含jQueryMobile之前运行。否则，扩展页面初始化期间实例化的弹出窗口小部件将为时已晚。

相关文章：