使用jQuery Mobile開發(fā)移動(dòng)應(yīng)用程序時(shí)，在一個(gè)頁(yè)面上彈出對(duì)話框，關(guān)閉對(duì)話框后，發(fā)現(xiàn)原來(lái)的頁(yè)面被刷新了。如果原頁(yè)面上有一些已經(jīng)選擇或者填寫的數(shù)據(jù)，則這些數(shù)據(jù)就會(huì)丟失。這時(shí)候，就需要對(duì)對(duì)話框的返回按鈕做一些處理，讓頁(yè)面返回到對(duì)話框父頁(yè)面在彈出對(duì)話框執(zhí)勤的狀態(tài)。

彈出對(duì)話框的按鈕一般寫法如下：

<a href="/Dialogs/MyDialog.htm"?data-role="button"data-rel="dialog"?data-transition="pop">彈出對(duì)話框</a>

對(duì)話框頁(yè)面的返回按鈕如下：

<a href="~/Home/Index" data-icon="back" data-role="button">返回列表</a>

上面的這種方式，返回后，Index頁(yè)面上的數(shù)據(jù)都因?yàn)樗⑿聛G失了！

特別是當(dāng)Index頁(yè)面上需要點(diǎn)擊按鈕通過(guò)Ajax加載列表數(shù)據(jù)時(shí)，點(diǎn)擊返回關(guān)閉對(duì)話框后，Ajax加載的列表數(shù)據(jù)全部丟失，非常頭疼！

通過(guò)在StackOverFlow網(wǎng)站上搜索，找到了答案！解決方法非常簡(jiǎn)單：將對(duì)話框頁(yè)面的“返回”按鈕修改成如下方式即可：

<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 讓承載對(duì)話框的頁(yè)面回到原來(lái)的狀態(tài)。【這是阻止瀏覽器默認(rèn)行為，也就是超鏈接不跳轉(zhuǎn)】

帖子地址：http://stackoverflow.com/questions/10286562/jquery-mobile-closing-dialog-reloads-calling-page

?

重要附加：

后來(lái)自己又做了好幾次實(shí)驗(yàn)發(fā)現(xiàn)，要保持原頁(yè)面（對(duì)話框的父頁(yè)面）內(nèi)容不變，原頁(yè)面需要完全加載，即跳轉(zhuǎn)到對(duì)話框父頁(yè)面的連接中要添加data-ajax="false"屬性。這樣，對(duì)話框的父頁(yè)面是完全加載的，關(guān)閉對(duì)話框頁(yè)面后，父頁(yè)面的內(nèi)容不變。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的jQuery Mobile弹出对话框后不刷新原页面，保持原页面内容不变的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。