jQuery Mobile 页面刷新机制

Posted 2023-05-09

【中文标题】jQuery Mobile 页面刷新机制

【英文标题】：jQuery Mobile Page refresh mechanism

【发布时间】：2018-11-12 07:07:23

【问题描述】：

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

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

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

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

谁能解释一下，请教一下 1-$.mobile.page() 2-$.mobile.changePage() 3-$.mobile.refresh()

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

【参考方案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 上测试过

【参考方案2】：

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

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

$.mobile.page() 不再推荐，请使用.trigger( "create")，另见：JQuery Mobile .page() function causes infinite loop?

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

请注意，某些小部件具有的创建事件和刷新方法之间存在重要区别。 create 事件适用于增强包含一个或多个小部件的原始标记。一些小部件所具有的刷新方法应该用于现有的（已经增强的）小部件，这些小部件已经以编程方式操作并且需要更新 UI 以匹配。

例如，如果您有一个页面，您在页面创建后动态附加了一个具有 data-role=listview 属性的新无序列表，则在该列表的父元素上触发 create 会将其转换为 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
);

【讨论】：

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

【参考方案3】：

我在 jQuery 论坛上发布过（希望对您有帮助）：

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

刷新动态修改的页面：

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

即使您创建新的页眉、导航栏或页脚，它也能正常工作。我已经用 jQM 1.0.1 对其进行了测试。

【讨论】：

我试图更新列表视图上的样式，并调用 .trigger('create') 设置文本和内容的样式，但不是让 LI 看起来像我想要的按钮。使用 .trigger('refresh') 似乎没有做任何事情。但是在我的列表中使用.listview('refresh') 就成功了！谢谢！ （我使用的是 JQM 1.1）

在我从导航栏中删除 LI 后，我正在尝试让 jquery mobile 刷新。我试过你的代码，它什么也没做。有什么想法吗？

【参考方案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();
);

【讨论】：

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

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

【参考方案5】：

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

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

</div>

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

希望这对将来的其他人有所帮助。

【参考方案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;
  
);