jQuery Mobile - 使用$ .mobile.changePage刷新頁面

我有一個簡單的功能，用jquery mobile打開一個頁面;頁面結構是這樣的：

$(document).on('pageinit','#page', function(){ 

//all script 

});

我的功能：

function dettail(id) { 
    //alert(id); 
    localStorage.setItem("id", id); 
    var url = "#page"; 
    $.mobile.changePage(url, {transition: "none", reloadPage:true}); 
}

此功能不會加載#page; 「reloadPage：true」爲什麼不起作用？

ps（我使用pageinit並且沒有pageshow，因爲我需要僅在一種情況下加載頁面）。

來源

2013-07-30 Henry8

'reloadPage'適用於，H與URL，多文件模板，沒有單文件模板。 – Omar

好的，我的問題有其他解決方案嗎？ – Henry8

恐怕您需要重新加載整個文檔。或者，動態創建一個新頁面。 – Omar

嘗試使用allowSamePageTransition選項，即：

$.mobile.changePage(
    window.location.href, 
    { 
    allowSamePageTransition : true, 
    transition    : 'none', 
    showLoadMsg    : false, 
    reloadPage    : true 
    } 
);

從http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/

來源

2013-07-31 07:49:39 DaveAlden

這段代碼不適合我。 – Henry8

此代碼僅用於刷新當前頁面，該頁面不回答此問題。 –

@Biswas Khayargoli是的，它確實回答了'$ .mobile.changePage'刷新頁面的問題。你誤解了這個問題。僅供參考此答案是參考JQM 1.2.0編寫的 - 它停止在JQM 1.3.1中工作 – DaveAlden

兩者如果我理解你的問題正確，你試圖刷新只是一個多頁面佈局中的特定#page部分。

正如您發現的那樣，$.mobile.changePage不能像那樣工作，它會從服務器中檢索整個頁面的新副本，而不僅僅是要刷新的#page部分。周圍的工作使用了「模擬」刷新，因爲缺乏更好的術語。

下面將引導您完成安裝/使用模擬更新的：

第1步 - 創建一個空的頁面

將以下HTML代碼進入人體的.. /主體部分您的多頁面佈局

<div data-role="page" id="empty_page_content" data-theme="b" data-content-theme="b"></div>

第2步 - 你dettail（）函數

在頭.. /頭部分（或在本節中加載外部JS文件），之前的jquery移動庫加載，請將dettail功能，寫成如下：

function dettail(id){ 

     localStorage.setItem("id", id); 

     //emulate a refresh by switching to an empty page div (and then back to this page again) 
     $.mobile.changePage(
      '#empty_page_content', 
      { 
      allowSamePageTransition : true, 
      transition    : 'none', 
      showLoadMsg    : false, 
      reloadPage    : false 
     } 
    ); 
    }

步驟3 - 設置在#empty_page_content頁面

在頭部上pageshow事件... /頭部分（或本節中加載外部的js文件），之後將jQuery Mobile的庫被加載時，將下面的JS代碼：

$(function() { 

     $(document).on("pageshow", "#empty_page_content", function() { 
      //console.log('pageshow event - #empty_page_content only'); 

      // return to #page whenever this page is loaded 
      // The return url is hardcoded in this example but it could be switched to a variable if different return pages are needed 



      $.mobile.changePage(
       '#page', 
       { 
       allowSamePageTransition : true, 
       transition    : 'none', 
       showLoadMsg    : false, 
       reloadPage    : false 
       } 
      ); 

     }); 

});

第4步 - 在你#page每顯示

在頭部的時間做的東西... /頭部分（或本節中加載外部的js文件），之後將jQuery Mobile的庫加載，放置以下js代碼：

$(function() { 

     $(document).on("pageshow", "#page", function() { 
      //console.log('pageshow event - #page'); 
      // .. do stuff here, such as look for a stored id value and update the content of the #page accordingly 

     }); 

    });

我成功地在私人網絡上測試了這個解決方案（所以我沒有鏈接讓你去看看）。希望它能在你的項目中爲你工作。如果不讓我知道，我會看看我能否幫助你實現目標。

請記住，最好加載所有頁面所需的所有頭../頭JavaScript代碼，這是所有頁面在每個頁面上所需要的（最好通過在所有頁面上加載相同的外部js文件完成），因爲js代碼位於頭段只能從訪問的第一頁加載一次。你可能打算讓用戶初步瀏覽page1，但除非你能保證它，否則你的代碼應該工作，如果第2頁或第3頁等最初被加載。

來源

2013-07-31 19:53:12 Drew

reloadPage:true只與網頁網址的作品，而不是頁面IDS

因此

：

$.mobile.changePage("#page", { 
    transition : "fade", 
    reverse : false, 
    changeHash : false, 
    allowSamePageTransition : true, 
    reloadPage:true 
});

將無法正常工作

來源

2013-10-30 10:57:09 Mirko

jQuery Mobile - 使用$ .mobile.changePage刷新頁面

回答

相關問題