jQuery Mobile对话框在页面加载 [英] jQuery Mobile Dialog on page load

问题描述

在我的第一个jQuery Mobile应用程序上工作。有一个localStorage值在应用程序中必须有一个值，所以我点击了pagehow事件来检查这个值：

  $（function（）{
 $（div [data-role ='page']）on（pageshow，function（event，ui）{
 if（getValue（）== null）{
 //显示对话框
 $ .mobile.changePage（＃dialog）; 
} 
}）; 
}）; 
  

在导航各种页面时工作，但在第一页加载时永远不会被调用。我试图将上面的If语句复制到我添加页面显示侦听器的部分下方，但它具有显示对话框的隐藏效果，然后再次显示。

在第一页上，似乎打开对话框是触发pageshow（这是奇怪的，考虑到我的选择器），这反过来触发另一个对话框。有没有人有关于如何解决这个问题的建议，还是更好的方式来解决这个问题？

更新＃1：

  $。mobile.changePage（#mypage，{allowSamePageTransition：true，transition：none}） 
  

但它具有与我原来的问题相同的效果，在那里启动对话框，然后隐藏它再次显示。似乎以某种方式启动对话框来触发pageshow事件，尽管我试图在我的选择器中过滤掉它。请注意，如果您删除转换：无选项，则对话框根本不会显示。

更新＃2： 我也尝试创建一个空白的初始页面，然后进行简单的页面转换

  $。mobile.changePage ＃我的页面）; 
  

但它仍然没有正确的行为。在这种情况下，它需要我到下一页，但是pagehow事件不会触发，因为我的对话框没有出现。我知道这不是射击，因为我可以从我的导航菜单中选择另一个页面，并且会出现对话框。

更新＃3：我的选择器，我附加的页面显示侦听器。我不是选择data-role =page，而是按照id来选择特定的页面。然后我重新尝试了我之前两次更新中描述的两种方法，但是它仍然工作不正确。首先，当我尝试使用allowSamePageTransition刷新初始页面时，似乎pagehow触发两次，因为该对话框启动两次。然后，当我尝试使用空白的初始页面，然后在我附加页面显示侦听器之后立即执行重定向，没有任何反应，对话框永远不会出现。如果我浏览到任何其他页面，对话框将按预期方式工作。我不明白为什么第一页这么麻烦。

解决方案

设置一个时间间隔来显示对话框，而不是调用一旦该页面显示。

  $（document）.on（'pageshow'，'#myPage'，function {
 if（getValue（）== null）{
 setTimeout（function（）{
 $ .mobile.changePage（'＃dialog'）; 
}，100）; // delay above zero 
} 
}）; 
  

这样，对话框将弹出 pageshow 事件，只有一次。

更新

我发现这个有趣的jQueryMobile事件图在这个

Working on my first jQuery Mobile app. There is a localStorage value that must have a value throughout the application, so I tapped into the pageshow event to check this value:

$(function () {
$("div[data-role='page']").on("pageshow", function (event, ui) {
    if (getValue() == null) {
        // show the dialog
        $.mobile.changePage("#dialog");
    }
});
});

This works when navigating through the various pages, but never gets called when the first page loads. I tried to copy the above If statement again below the part where I add the pageshow listener, but it has the effect of showing the dialog, hiding it, then showing it again.

On that first page, it seems like opening the dialog is triggering pageshow (which is strange, considering my selector), which in turn triggers another dialog. Does anyone have advice on how to get around this, or a better way to go about the whole thing?

UPDATE #1: I tried

$.mobile.changePage( "#mypage", { allowSamePageTransition: true, transition: "none" } );

but it had the same effect as my original problem where it launches the dialog, then hides it, then shows it again. It seems like somehow launching the dialog is firing the pageshow event, even though I tried to filter that out in my selector. Note that if you remove the transition: "none" option, the dialog does not appear at all.

UPDATE #2: I also tried to create a blank initial page, then do a simple page transition

$.mobile.changePage("#mypage");

but it still does not have the correct behavior. In this scenario, it does take me to the next page, but the pageshow event does not fire, because my dialog does not appear. I know it is not firing because I can select another page from my navigation menu and the dialog does appear.

UPDATE #3: I changed my selector where I attach the pageshow listener. Instead of selecting where data-role="page", I am selecting the specific pages by their id. Then I re-tried both of the approaches I described in my previous two updates, but it still works incorrectly. First, when I try to refresh the initial page using allowSamePageTransition, it seems that pageshow fires twice, because the dialog launches twice. Then, when I try using a blank initial page, and then do a redirect immediately after I attach the pageshow listener, nothing happens and the dialog never appears. If I navigate to any other page, the dialog works as expected. I don't understand why this first page is so troublesome.

解决方案

Set a time interval to show the dialog, rather than call it once the page is shown.

$(document).on('pageshow', '#myPage' ,function () {
 if (getValue() == null) {
  setTimeout(function () {
   $.mobile.changePage('#dialog');
  }, 100); // delay above zero
 }
});

This way, the dialog will popup on pageshow event and only once.

update

I found this interesting jQueryMobile events diagram on this blog. It explains why a dialog or a popup is fired twice on the first page and not on the rest of the pages in case of multi-pages structure. It seems it fires once the page is ready into DOM and again when on pageshow. Setting a timeout prevents the dialog from firing on pageinit, and therefore skips that event until pageshow is triggered.

Image / diagram source: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html

这篇关于jQuery Mobile对话框在页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！