jQuery Mobile 点击刷新当前页面答案

【问题标题】：jQuery Mobile Refresh the current page on clickjQuery Mobile 点击刷新当前页面
【发布时间】：2015-10-22 08:00:33
【问题描述】：

我在查询移动设备中有一个多页模板。如何在单击超链接或按钮时刷新当前页面？我正在使用 JQM 1.4.5 版

我已尝试使用how to refresh(reload) page when click button in Jquery mobile 中建议的以下代码，但是它没有按预期工作：

// Refresh the store main page - experimental
$(document).on('click', '#aStoreReload', function (event) {
    $.mobile.changePage(window.location.href, {
        allowSamePageTransition: true,
        transition: 'none',
        showLoadMsg: false,
        reload: true // tried reloadPage: true also
    });
});

它将返回到带有 URL 的主页。我的意思是本地服务器中的http://localhost:56235/main.html#storeMainPage。但是，JsBin 显示的是空白页，而jsfiddle 什么也不做。点击商店链接可以看到有刷新按钮的页面。

如何正确刷新页面（视图）？

编辑

我也在点击事件中尝试了以下脚本：

$.mobile.changePage($("#storeMainPage"), { transition: 'slidedown' });
$(document).pagecontainer("load", "#storeMainPage", { reload: true });

第一个like什么也不做，第二行给出一个错误Uncaught Error: cannot call methods on pagecontainer prior to initialization; attempted to call method 'load'，这是正常的，因为我们在初始化之前调用了pagecontainer。

【问题讨论】：

标签： javascript jquery html css jquery-mobile

【解决方案1】：

使用 pagecontainer 小部件的更改方法（不加载）：

$(document).on("pagecreate","#storeMainPage", function(){ 
    $(document).on('click', '#aStoreReload', function (event) {
        $( ":mobile-pagecontainer" ).pagecontainer("change", "#storeMainPage", {  reload : true, allowSamePageTransition : true, transition : "none" });
    });    
});

这将导致重新触发 pageshow 事件。

更新FIDDLE

【讨论】：

感谢您的回答。此解决方案刷新页面。但是，我需要重新创建页面。我的意思是，我有在change 和pagebeforecreate 上执行一些ajax 请求的下拉列表也有一些ajax 请求。 reload 应该刷新页面上的所有内容。换句话说，它应该执行pagebeforecreate 事件中的功能。此外，如果我在我的页面中使用提供的代码，它将再次返回 indexPage 并使用 URL，正如问题中提到的那样。
@Ravimalya，reload 参数仅在页面位于单独的 html 文件中时才有效。对我来说，我的代码保留在商店页面上并强制进行新的页面显示。只需将您的 ajax 创建移动到 pageshow 或 pagebeforeshow 而不是 pagecreate。
谢谢。终于，我得到了我想要的。看我的回答。 :)

【解决方案2】：

那么简单：

location.reload();

无论如何，$.mobile.changePage 已被弃用：

注意：jQuery.mobile.changePage 自 jQuery Mobile 1.4.0 起已弃用，并将在 1.5.0 中删除。请改用 pagecontainer 小部件的 change() 方法。

reference

【讨论】：

感谢您的快速回复。 location.reload() 将重新加载整个 HTML 页面，而我想将当前的 jquery 移动页面重新加载到 DOM 中。我不知道如何在 jquery 中单击按钮时调用更改事件。 documentation 对于新手或正在学习的人来说是不公平的......
$( ":mobile-pagecontainer" ).pagecontainer("change", 是$.mobile.changePage 的替代品。 reload() 不是解决方案。

【解决方案3】：

根据@ezanker 的回答，我终于能够在按钮点击时重新加载页面。我必须将页面名称添加到哈希中以重新加载页面并重新调用 pagebforeshow 事件中的所有 ajax 函数。

我使用的代码如下

// Refresh the store main page - experimental
//$(document).on("pagecreate", "#storeMainPage", function () {
    $(document).on('click', '#aStoreReload', function (event) {
        $(":mobile-pagecontainer").pagecontainer("change", "main.html#storeMainPage", {
            reload: false,
            allowSamePageTransition: true,
            transition: "none"
        });
        $('#storeMainDesc').text("Latest Store Updates"); // reset the text.
    });
//});

注意代码的变化。一个文件名前缀，第二个 reload: false 属性。如果我使用属性reload: true，前一页将按原样加载url；即http://localhost:56235/main.html#storeMainPage。不知道怎么回事。

【讨论】：