使用jQuery Mobile開發移動應用程序時,在一個頁面上彈出對話框,關閉對話框后,發現原來的頁面被刷新了。如果原頁面上有一些已經選擇或者填寫的數據,則這些數據就會丟失。這時候,就需要對對話框的返回按鈕做一些處理,讓頁面返回到對話框父頁面在彈出對話框執勤的狀態。
彈出對話框的按鈕一般寫法如下:
<a href="/Dialogs/MyDialog.htm"?data-role="button"data-rel="dialog"?data-transition="pop">彈出對話框</a>
對話框頁面的返回按鈕如下:
<a href="~/Home/Index" data-icon="back" data-role="button">返回列表</a>
上面的這種方式,返回后,Index頁面上的數據都因為刷新丟失了!
特別是當Index頁面上需要點擊按鈕通過Ajax加載列表數據時,點擊返回關閉對話框后,Ajax加載的列表數據全部丟失,非常頭疼!
通過在StackOverFlow網站上搜索,找到了答案!解決方法非常簡單:將對話框頁面的“返回”按鈕修改成如下方式即可:
<a href="~/Home/Index" data-icon="back"οnclick="$('.ui-dialog').dialog('close'); return false;"?data-role="button">返回列表</a>
需要特別注意?οnclick="$('.ui-dialog').dialog('close'); return false;",后面的 return false 讓承載對話框的頁面回到原來的狀態。【這是阻止瀏覽器默認行為,也就是超鏈接不跳轉】
帖子地址:http://stackoverflow.com/questions/10286562/jquery-mobile-closing-dialog-reloads-calling-page
?
重要附加:
后來自己又做了好幾次實驗發現,要保持原頁面(對話框的父頁面)內容不變,原頁面需要完全加載,即跳轉到對話框父頁面的連接中要添加data-ajax="false"屬性。這樣,對話框的父頁面是完全加載的,關閉對話框頁面后,父頁面的內容不變。