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"onclick="$('.ui-dialog').dialog('close'); return false;" data-role="button">返回列表</a>

需要特别注意 onclick="$('.ui-dialog').dialog('close'); return false;",后面的 return false 让承载对话框的页面回到原来的状态。【这是阻止浏览器默认行为,也就是超链接不跳转】

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

 

重要附加:

后来自己又做了好几次实验发现,要保持原页面(对话框的父页面)内容不变,原页面需要完全加载,即跳转到对话框父页面的连接中要添加data-ajax="false"属性。这样,对话框的父页面是完全加载的,关闭对话框页面后,父页面的内容不变。


修改时间 2016-09-05

真诚赞赏,手留余香
赞赏
随机推荐
Cordova 权限问题 Error: spawn EACCES
gyp WARN EACCES user "nobody" does not have permission to access the dev dir
npx 是什么?
Apache ModSecurity 基础介绍
Node.js process.env 根据环境切换配置文件
macOS下 文件夹合并方法
php防sql注入
Webpack 概念理解 module、chunk 和 bundle 的区别
Nginx 报错 nginx accept() failed (24: Too many open files)
JavaScript中函数参数的值传递和引用传递