Question

我目前很难理解JQuery mobile在ajax更新后如何处理页面刷新。

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

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

现在我正在使用：$.mobile.changePage( $('#result') );，它可以很好地从搜索字段到结果页面。然而：如果我从结果页面重用下一个/ prev页面（新的json调用，新的解析，DOM中新添加的节点）; Jquery Mobile不会“绘制”新添加的节点。

任何人都可以解释，请使用和区分 1- $.mobile.page() 2- $.mobile.changePage() 3- $.mobile.refresh()

或者给我一个关于我应该如何处理页面更改的提示。谢谢！

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上测试

Answer 2

请在此处仔细查看：http://jquerymobile.com/test/docs/api/methods.html

$.mobile.changePage()是从一个页面更改为另一个页面，参数可以是url或页面对象。（只有#result也可以）

我们不再推荐{p> $.mobile.page()，请使用.trigger( "create")，另请参阅：JQuery Mobile .page() function causes infinite loop?

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

请注意，某些小部件具有的create event和refresh方法之间存在重要差异。 create事件适用于增强包含一个或多个小部件的原始标记。某些小部件具有的刷新方法应该用于已经以编程方式操作的现有（已经增强的）小部件，并且需要更新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 3

我在jQuery论坛上发帖（我希望它可以提供帮助）：

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

刷新动态修改的页面：

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

即使您创建新的标题，导航栏或页脚，它仍然有效。我用jQM 1.0.1进行了测试。

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

Answer 5

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

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

</div>

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

希望将来能帮助其他人。

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

jQuery Mobile Page刷新机制

6 个答案: