2012-02-20 108 views
4

我使用此代碼加載jQueryMobile對話框:爲什麼jQueryMobile重新加載對話框關閉的頁面?

<a data-rel="dialog" href="/path/to/dialog?arg1=val1" data-theme="b" id="deleteButton" class="ui-btn-right home" data-direction="reverse" data-transition="slidedown">Delete</a> 

我的對話框有兩個按鈕:

<a data-role="button" href="/path/to/page/that/showed/dialog" id="deleteAddressButton" data-rel="back">Delete</a> 
<a data-role="button" data-theme="a" href="/path/to/page/that/showed/dialog" data-rel="back">Cancel</a> 

當我點擊按鈕對話框關閉並返回到打開該對話框中的頁面。但是,打開對話框的頁面正在通過ajax重新加載,這似乎沒有必要,並且正在破壞事情。有誰知道爲什麼會發生這種情況?不要重新加載調用頁面,只能關閉對話框?

注:如果我本來去一個不同的網頁,例如調用頁面只重載:

首頁 - >頁面調用對話框 - >對話

當我去發生的問題首頁,然後頁面調用對話框。如果我在頁面上完成了一個完整的頁面重新加載,調用對話框,然後打開和關閉對話框,調用對話框的頁面不會通過ajax重新加載。

編輯:這也發生在jQuery Mobile的文檔站點上。要看到這一點:

  1. 轉到http://jquerymobile.com/demos/1.0.1/
  2. 導航到「的頁面&對話框」
  3. 導航到「對話框」
  4. 點擊第一個「打開對話框」按鈕。
  5. 使用Firebug或類似的東西來觀看Ajax調用。
  6. 使用任一按鈕關閉對話框。
  7. 請注意,Ajax調用被觸發以重新加載調用頁面。

回答

0

jQuery Mobile的網站做同樣的事情,所以它必須是默認行爲。

1

你在做什麼「pageShow」回調?因爲這可能是造成這種情況的原因。一旦隱藏對話框,「pageShow」事件將再次被觸發。

如果你不想讓它顯示,你需要重新調整你的代碼來處理這個問題,或者使用「pageLoad」代替頁面顯示。以下是描述此行爲的JQM文檔的鏈接:http://jquerymobile.com/test/docs/api/events.html

+0

我沒有使用pageShow回調。 – offex 2012-02-20 18:04:11

+0

您使用哪種回調來初始化頁面?你的問題有點含糊,很難說沒有看到你的頁面初始化代碼。 – gabaum10 2012-02-20 18:31:41

+0

我沒有使用任何回調來初始化頁面。我不認爲有任何頁面初始化代碼供您查看。我實際上在jQuery Mobile的網站上看到了相同的行爲,所以我認爲這不是我正在做的事情。 – offex 2012-02-20 18:35:07

1

編輯

這是卓有成效的,並確保你使用$( '#yourDialog')。對話框( '親密') $.mobile.page.prototype.options.domCache = true;

我可以確認的是,即使僅當按照預期關閉對話框時,頁面顯示會被觸發,jQM仍然會爲該頁面發出AJAX請求。如果這不是唯一的方法,那會很好,但到目前爲止,看起來好像是這樣。

+0

感謝您的回答。我試過對話('關閉'),它給了我同樣的東西。我的對話框包含與呼叫頁面完全相同的JavaScript。我們不會在任何地方調用reloadPage = true。 同樣的事情發生在jQuery的移動文檔網站: 去這裏 - http://jquerymobile.com/demos/1.0.1/ 導航到「頁面和對話框」 - 「對話框」。點擊第一個按鈕上的「打開對話框」。使用螢火蟲觀看阿賈克斯電話。當您點擊任一按鈕時,您將看到ajax調用觸發器重新加載頁面。 – offex 2012-02-20 21:00:02

+0

它工作正常,如果你直接導航到http://jquerymobile.com/demos/1.0.1/docs/pages/page-dialogs.html雖然。 – offex 2012-02-20 21:02:31

+0

嘗試$ .mobile.page.prototype.options.domCache = true;如果您的頁面不在DOM中,那麼它會重新獲取它 - 我檢查並確認我們不會重新加載該頁面。但我們並沒有將其設置爲true,這很好,因爲我們有頁面顯示代碼,我們需要每次都重新運行,因爲我們的數據非常動態 – 2012-02-20 21:20:28

2

編輯

一個簡單的方法是使用非Ajax鏈接調用對話框

<a href="url/to/page-that-calls-dialog" data-ajax="false">...</a> 

這在失去DOM緩存和重新裝載的工程費用的頁面整個頁面。

看起來我們必須等到jQuery給出對話框小部件的正確行爲。

原因

這是因爲jQuery Mobile的只保留三中DOM網頁:

  1. 是得到了加載第一次(在你的情況下,主頁)頁面。
  2. 轉換頁面(帶有'加載'動畫的頁面)。
  3. 您要導航到的頁面(本例中爲對話框頁面)。

第一個直到你做非ajax導航(例如,刷新瀏覽器或輸入URL,然後按回車),如果是,新的成爲第一頁。

第二個只有當你改變到另一個頁面,並生活在第一個相同的時間跨度。

第三個總是持有您正在導航到的新頁面,並且(這裏是'troll-magic')每當您使用ajax進行導航時,它都會被替換。

在思想這條命令:

  • 當你進入到你的「主頁」的第一頁設爲您的「主頁」。

  • 當您轉到「調用對話框的頁面」時,會創建第二頁面,並將第三頁面設置爲「調用對話框的頁面」。

  • 當你調用你的對話框時,這將取代前面的第三頁,所以你的「調用對話框的頁面」被從DOM中刪除。

+0

花了幾個小時試圖讓對話框正常工作後,我放棄了並決定採取一個簡單的解決方案,即使用非Ajax鏈接到調用對話框的頁面:...它工作,儘管它不是人們想要的解決方案。 – JeyDotC 2012-03-25 05:48:47

相關問題