jQuery移动页面刷新机制

Question

我很难理解jQuery Mobile在Ajax更新后如何处理页面刷新。

我的网站有两个页面 - 分别是一个搜索引擎和一个唯一的文件。

第一个页面是一个搜索栏。提交会触发一个JSON调用和解析器，它会更新第二个页面：结果页面。

目前我正在使用：$.mobile.changePage($('#result')); 从搜索栏到结果页这样做很好。

但是：如果我从结果页重复使用它以获取下一页/上一页（新的JSON调用，新的解析，新添加的节点在DOM中）；jQuery Mobile就无法“绘制”新添加的节点。

请问有人能够解释以下内容的使用和区别吗？ 1-$.mobile.page() 2-$.mobile.changePage() 3-$.mobile.refresh() 或给我一些提示，告诉我该如何处理页面更改。 谢谢！

- user980560

Answer 1

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上进行测试。

- Sebastien GISSINGER

Answer 2

请仔细查看这里：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的refresh方法将仅更新这些新列表项以使其达到增强状态，并保留现有列表项不变。 $.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
});

- GerjanOnline

---

感谢您解释了创建和刷新之间的区别。一直在寻找这么简单的解释。 - Craig

Answer 3

我在jQuery论坛上发布了以下内容（希望有所帮助）：

深入研究jQM代码后，我找到了这个解决方案。希望它能帮助其他人：

刷新一个动态修改的页面：

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

即使您创建了新的标题、导航栏或页脚，它也可以正常工作。我已经在jQM 1.0.1上进行了测试。

- Rubén Norte

---

我试图更新ListView的样式，调用.trigger('create')时样式应用到了文本和其他内容，但没有使LI元素看起来像我想要的按钮。使用.trigger('refresh')似乎没有任何作用。但是，对我的List使用.listview('refresh')就解决了问题！谢谢！（我正在使用JQM 1.1） - CWSpear

我正在尝试在从导航栏中删除LI后刷新jquery mobile。我尝试了您的代码，但它没有任何作用。有什么想法吗？ - Josh Mouch

Answer 4

我看到这个线程是为了使用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();
});

- mfregoe

---

我稍微改进了这个，并在点击后删除了点击事件（通过添加.off()）。否则，页面会刷新，第二次用户点击时，事件将触发两次。 - kloarubeek

编辑被拒绝，我建议在刷新完成后删除点击事件：$(document).off("click", "#refresh").on("click", "#refresh", function() { refreshPage(); }); - kloarubeek

Answer 5

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

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

</div>

在我的情况下，是我的购物车出了问题。如果顾客将一个物品添加到购物车中，然后继续购物并将另一个物品添加到购物车中，购物车页面将不会显示新的物品，除非他们刷新页面。将data-cache设置为false指示JQM不要缓存该页面，据我所知。

希望这能帮助未来的其他人。

- dherrin79

Answer 6

这个答案对我很有帮助 http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php。

在多页面模板的上下文中，我在Javascript的'pagebeforeshow'处理程序中修改了<div id="foo">...</div>的内容，并在脚本结束时触发了刷新：

$(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;
  }
});

- FredP