Question

我想在ajaxStart上展示一个旋转加载器。我已经使用了弹出窗口，以便背景淡出并变为非活动状态。也就是说，如果有其他方法可以实现这一点（而不是使用弹出窗口），id也愿意尝试它们。

问题是，虽然在页面加载和按钮单击上执行包含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>

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

Answer 1

首先，简短回答：jQuery Mobile一次只支持一个活动弹出窗口（暂时）。 documentation说：

注意：不允许链接弹出窗口
该框架目前没有支持弹出窗口的链接，因此无法嵌入链接一个弹出窗口到另一个弹出窗口。所有与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之后运行但之前包含jQuery Mobile。否则，扩展在页面初始化期间实例化的弹出窗口小部件将为时已晚。

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

1 个答案: