jQuery Mobile页面刷新机制

Question

我目前有很多痛苦的理解如何JQuery移动处理页面刷新ajax更新后。

我有一个两页 - 独特的文件站点：搜索引擎。

第一页是搜索字段。提交触发器更新第二页的JSON调用和分析器：结果。

现在我正在使用：$.mobile.changePage($('#result'));哪些工作很好从搜索字段到结果页面。 但是： 如果我将它从结果页面重用到next/prev页面（新的json调用，新的解析，DOM中新添加的节点）; Jquery Mobile只是不“画”新添加的节点。

任何人都可以解释，讨好的 1- $.mobile.page() 2- $.mobile.changePage() 3- $.mobile.refresh()

或者给我一个提示，我应该如何处理页面的变化的使用和区别。 谢谢！

Answer 1

在这里好好看看：http://jquerymobile.com/test/docs/api/methods.html

$.mobile.changePage()是改变从一个网页到另一个，并且参数可以是URL或页面对象。 （仅#result也将工作）

$.mobile.page()不推荐了，请用.trigger("create")，还看到：JQuery Mobile .page() function causes infinite loop?

重要： 创建与刷新：一个重要的区别

注意，有创建事件和某些小部件具有的刷新方法之间的重要区别。创建事件适用于增强包含一个或多个小部件的原始标记。某些小部件所具有的刷新方法应该在已编程操作的现有（已增强的）小部件上使用，并且需要更新UI以进行匹配。例如，如果您有一个页面在页面创建后动态地添加一个新的具有data-role = listview属性的无序列表，触发该列表的父元素上的create会将其转换为listview样式的小部件。如果以编程方式添加更多列表项，调用listview的刷新方法会将这些新列表项更新为增强状态，并保持现有列表项不变。

$.mobile.refresh()不存在我猜

那么，你用你的结果？一个列表视图？然后，你可以通过做更新：

$('ul').listview('refresh'); 

例子： http://operationmobile.com/dont-forget-to-call-refresh-when-adding-items-to-your-jquery-mobile-list/

否则，你可以这样做：

$('#result').live("pageinit", function(){ // or pageshow 
    // your dom manipulations here 
}); 

Answer 2

我张贴在jQuery的论坛（我希望它可以帮助）：

潜入到jQM代码我发现这个解决方案。我希望它可以帮助其他人：

要刷新动态修改页面：

function refreshPage(page){ 
    // Page refresh 
    page.trigger('pagecreate'); 
    page.listview('refresh'); 
} 

，即使你创造新的标题，导航栏或页脚工作。我用jQM 1.0.1测试过它。

Answer 3

function refreshPage() 
{ 
    jQuery.mobile.changePage(window.location.href, { 
     allowSamePageTransition: true, 
     transition: 'none', 
     reloadPage: true 
    }); 
} 

从这里http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/两者还测试了jQuery Mobile的1.2.0

Answer 4

这个答案的伎俩我http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php。

在多页面模板的情况下，我修改<div id="foo">...</div>的内容在JavaScript“pagebeforeshow”处理程序，并在脚本的末尾触发刷新：

$(document).bind("pagebeforeshow", function(event,pdata) { 
    var parsedUrl = $.mobile.path.parseUrl(location.href); 
    switch (parsedUrl.hash) { 
    case "#p_02": 
     ... some modifications of the content of the <div> here ... 
     $("#foo").trigger("create"); 
    break; 
    } 
}); 

Answer 5

我解决了这个问题通过在我想要刷新的页面上的页面div中使用data-cache =“false”属性。

<div data-role="page" data-cache="false"> 
/*content goes here*/ 

</div> 

就我而言，这是我的购物车。如果顾客将一件物品添加到购物车中，然后继续购物并将另一件物品添加到购物车中，则购物车页面不会显示新物品。除非他们刷新页面。据我所知，将data-cache设置为false将指示JQM不缓存该页面。

希望这可以帮助其他人在未来。

Answer 6

我发现这个线程看起来用jQuery Mobile创建一个ajax页面刷新按钮。

@sgissinger与我正在寻找的东西有最接近的答案，但已经过时了。

我更新的jQuery Mobile的1.4

function refreshPage() { 
    jQuery.mobile.pageContainer.pagecontainer('change', window.location.href, { 
    allowSamePageTransition: true, 
    transition: 'none', 
    reloadPage: true 
    // 'reload' parameter not working yet: //github.com/jquery/jquery-mobile/issues/7406 
    }); 
} 

// Run it with .on 
$(document).on("click", '#refresh', function() { 
    refreshPage(); 
});