jQuery Mobile弹出窗口没有打开.popup（'open'） [英] jQuery Mobile popup is not opening on .popup('open')

问题描述

我正在尝试使用jQuery Mobile 1.3.1的弹出窗口在登录凭据为假时警告用户。我从jquerymobile的文档开始使用基本模板，但我无法使用 $（'＃popupBasic'）。popup（'open'）; 如果我使用这样;

I am trying to use jQuery Mobile 1.3.1's popup to warn the user when login credentials are false. I started with a basic template from jquerymobile's documentation, but I couldn't make it work with $('#popupBasic').popup('open'); If I use it this way;

     <div data-role="page">


        <div data-role="header" data-tap-toggle="false">
        </div><!-- /header -->

        <div data-role="content">

            <a href="#popupBasic" data-rel="popup">Tooltip</a>
            <div data-role="popup" id="popupBasic">I will change this text dynamically if this popup works</div>


        </div><!-- /content -->
    </div><!-- /page -->

单击工具提示链接时效果很好。但在我的情况下，没有任何点击，所以我正在尝试这个;

It works well when I click on the Tooltip link. But in my case there isn't any click so I am trying this;

                if(retVal){
                    $.mobile.changePage('index');
                }
                else{                    
                    $('#popupBasic').popup();
                    $('#popupBasic').popup("open");
                }

这是在我的ajax登录功能进行回调之后，所以如果retVal为真，则没有任何错误，如果有错误（并且在那时我试图显示弹出窗口）。顺便说一下，我所有的js部分都在

this is after my ajax login function makes a callback, so retVal is true if there isn't any errors, false if there is (and at that point I am trying to show popup). By the way all my js part is in

 $(document).on('pageinit', function(){});

所以我等到jquerymobile为页面做好准备。

so i wait till jquerymobile is ready for the page.

当我这样做时会在桌面浏览器链接更改上发生什么

What happens when I do this is on desktop browsers link changes as

http://localhost/login#&ui-state=dialog

但不显示弹出窗口。经过一些刷新和缓存后，它开始显示。在iOS上同样的事情也会发生但是在Android上有时它会在一段时间内改变链接。

but doesn't show the pop up. After some refreshes and caches it starts to show. On iOS same thing also happens but on android sometimes it changes link some time it doesn't.

如果有人能帮助我解决这个问题，我会很高兴。
提前致谢。

I would be really happy if someone can help me to solve this problem. Thanks in advance.

推荐答案

那是因为当 pageinit 被解雇了，poupup还没准备好进行操作。您需要使用 pageshow 来打开弹出窗口。以下是您的操作：

That's because when pageinit is fired, the poupup isnt ready for manipulation just yet. You need to use pageshow to get the popup to open. Here's what you do :

• 在 pageinit 中进行ajax调用。将数据存储在页面的 data 属性中。


• 然后，在pageshow事件中，从数据中获取if并按照方式操作它你想要的，然后打开弹出窗口。

• Make the ajax call in pageinit. store the data in data attribute of the page.
• Then, in the pageshow event, take if from data and manipulate it the way you want, then open the popup.

这是代码：

$(document).on({
    "pageinit": function () {
        alert("pageinit");
        //$("#popupBasic").popup('open'); will throw error here because the page is not ready yet
        //simulate ajax call here
        //data recieved from ajax - might be an array, anything
        var a = Math.random();
        //use this to transfer data betwene events
        $(this).data("fromAjax", a);
    },
    //open popup here
    "pageshow": function () {
        alert("pageshow");
        //using stored data in popup
        $("#popupBasic p").html("Random : " + $(this).data("fromAjax"));
        //open popup
        $("#popupBasic").popup('open');
    }
}, "#page1");

这是一个演示：http://jsfiddle.net/hungerpain/MvwBU/

这篇关于jQuery Mobile弹出窗口没有打开.popup（'open'）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！