2012-02-27 83 views
1

我正在为应用程序使用JQuery Mobile。虽然它是一个很好的框架,但我还是有一些细微的差别。目前,我有一个两页的应用程序。当用户导航到第二页时,我会与Web服务进行交互。如果Web服务返回成功,我加载第二页。如果Web服务返回失败的消息,我想用提示向他们显示一个对话框。要做到这一点,我目前做如下:JQuery Mobile - 与对话框交互

my.js

$("#page2").live("pageshow", function() { 
    var isGood = getResult(); 
    if (isGood == false) { 
    $.mobile.changePage("/myDialog", { role: "dialog" }); 
    } 
    else { 
    // Continue loading page2 related information 
    } 
}); 

目前,这个逻辑作品几乎是我需要的。该对话框出现。但是,当我关闭它时,“page2”的“pageshow”事件再次触发。因此,再次加载对话框。基本上,我有一个无限循环。我不知道如何解决这个问题。它几乎就像一个对话框完全独立加载到DOM中,而不是与页面相关。因此,我不确定如何响应对话事件或与它进行交互。我如何解决这个问题?

谢谢

回答

0

我不知道这是否是做到这一点的最好办法,但它应该工作:

var dialogShown = false; 

$("#page2").live("pageshow", function() { 
    if(dialogShown) 
    return; 
    var isGood = getResult(); 
    if (isGood == false) { 
    $.mobile.changePage("/myDialog", { role: "dialog" }); 
    dialogShown = true; 
    } 
    else { 
    // Continue loading page2 related information 
    } 
}); 
0

我做的非常类似的东西,除了我确认一个用户已通过身份验证对话框。下面的代码块是我处理这种操作方式的关键所在:

(function(){ 
    // Bind to jQM's page change event 
    $(document).on('pagebeforechange', function(e, data) { 
    var loadPage = function(){}; 

    if (typeof data.toPage !== "string") { 
     // Continue with normal jQM operation 
     return; 
    } 

    if (data.toPage.match(/skipCheck=1/)) { 
     // We have already performed all of our checks. 
     // Send the user on to the desired location. 
     return; 
    } 

    loadPage = function() { 
     // The user seems to be authorized right now so let's 
     // send him on to his desired location. 
     $.mobile.changePage(data.toPage + "?skipCheck=1", data.options); 
    }; 

    if (data.toPage.match(/securedPage/)) { 
     e.preventDefault(); // Stop the page load until we know more 
     MYAPP.addEvent('isLoggedInComplete', loadPage); 

     // This is where you would do something in lieu of the 
     // the actual page change event. 
    } 
    }); 
}()); 

请注意,我有自己的目标,MYAPP,它有自己的事件系统。我使用该对象的事件系统来启动加载我的第二页。

这个问题的关键以及您的问题的答案是检查'skipCheck'查询参数。这个参数是我目前用来确定页面加载事件是否应该被允许像平常一样完成,或者如果我应该拦截它并做其他事情。

另一个注意:这段代码来自一个很早开发的应用程序。当我在这个应用程序上工作时,我是一个学习jQM。因此,这可能不是解决问题的最佳方式。