jQuery Mobile弹出对话框后不刷新原页面，保持原页面内容不变

使用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"属性。这样，对话框的父页面是完全加载的，关闭对话框页面后，父页面的内容不变。