easyui的tab加载页面中的form重复提交
2013-05-30 09:43
232 查看
Easyui中的tabs组件以href方式加载目标页面,如果目标页面中有dialog或者window这类的easyui组件中放了form.那么在关闭这个tab再次打开.如果进行form提交操作,后台就会收到两次提交请求,再次重复以上操作会收到3次提交请求,如果将表单serialize()后以jquery的post提交服务器将收到值全是数组方式组织的.
经分析发现,Easyui的tab加载页面后会把目标页面的dialog组件的DOM代码从目标页面中拿出放到本页面的DOM结构中.先看以下在目标页面中dialog初始化前后的差异
1.目标页面原始DOM结构如下(页面中的dialog未经实例化)
其中<!-- 表单 -->代码<div id="dept-dialog"...>就是包含form的dialog
2.如果目标页面在加载时实例化了dialog,代码如下
可以看到<!-- 表单 -->下的<div id="dept-dialog"...>代码的DOM结构发生了改变,被移动到了截图中下方的位置
3.那么再来看一下,这个页面被tabs加载后发生了什么
截图中,蓝框内是tab中被加载的目标DOM,可以看到红色框中<!-- 表单 -->下的<div id="dept-dialog"...>代码从目标页面的DOM结构中被移走了,被移动到了tabs组件所在页面的DOM结构中,因为DOM展开后太大所以截图没有截到.
这就是问题所在,当tabs中目标页面被关闭时,Easyui会销毁掉蓝框内的DOM内容,但是目标页面中的dialog组件被移动到外面,导致dialog的DOM内容没有与目标页面一起销毁,当再次以tab方式加载目标页面时,会在tab组件所在页面的DOM结构中生成块相同的<div id="dept-dialog"...>代码内容.这就导致了表单的重复提交.
解决方法:目前没有找到好的办法,笨一点的,在tabs加载页面前,记录本tab页面中所有组件的ID,在tab关闭时手动找到这个对象删除掉.
加载时的代码:
关闭时的动作:
经分析发现,Easyui的tab加载页面后会把目标页面的dialog组件的DOM代码从目标页面中拿出放到本页面的DOM结构中.先看以下在目标页面中dialog初始化前后的差异
1.目标页面原始DOM结构如下(页面中的dialog未经实例化)
其中<!-- 表单 -->代码<div id="dept-dialog"...>就是包含form的dialog
2.如果目标页面在加载时实例化了dialog,代码如下
可以看到<!-- 表单 -->下的<div id="dept-dialog"...>代码的DOM结构发生了改变,被移动到了截图中下方的位置
3.那么再来看一下,这个页面被tabs加载后发生了什么
截图中,蓝框内是tab中被加载的目标DOM,可以看到红色框中<!-- 表单 -->下的<div id="dept-dialog"...>代码从目标页面的DOM结构中被移走了,被移动到了tabs组件所在页面的DOM结构中,因为DOM展开后太大所以截图没有截到.
这就是问题所在,当tabs中目标页面被关闭时,Easyui会销毁掉蓝框内的DOM内容,但是目标页面中的dialog组件被移动到外面,导致dialog的DOM内容没有与目标页面一起销毁,当再次以tab方式加载目标页面时,会在tab组件所在页面的DOM结构中生成块相同的<div id="dept-dialog"...>代码内容.这就导致了表单的重复提交.
解决方法:目前没有找到好的办法,笨一点的,在tabs加载页面前,记录本tab页面中所有组件的ID,在tab关闭时手动找到这个对象删除掉.
加载时的代码:
$('#my-tabs').tabs('add',{ title: title, href : url,//内容页面的地址 border : false, closable:true, id : title, extractor: function(data){ //抽取body中的内容 var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im; var matches = pattern.exec(data); if (matches){ data = matches[1]; } var tmp = $('<div/>').html(data); var divs = $(tmp).find('[id]'); var ids = []; for(var i=0;i<divs.length;i++){ ids.push(divs[i].getAttribute("id")); } //记录本tab中的所有带ID的DIV $('#base-tabs').tabs('getTab',title).divs = ids; return data; }
关闭时的动作:
$('#my-tabs').tabs({ autoWidth:true, onBeforeClose:function(title,index){//关闭面板前把此功能的资源释放 var tab = $(this).tabs('getTab',index); //准备删除的DIV内容 $('#my-tabs').attr("rmdiv",tab.divs); },onClose : function(){//删除被关闭tab中用到的DOM对象 var divs = $('#my-tabs').attr("rmdiv").split(","); for(var i=0;i<divs.length;i++){ var divTarget = $('#'+divs[i]); if(divTarget){ divTarget.remove(); } } } });
相关文章推荐
- easyui关于解决tab添加的页面通过href加载数据内容的页面刷新后form表单重复提交的问题;
- easyui的tab加载页面中的form重复提交
- easyui的tab加载页面中的form重复提交
- DevExpress XtraTabControl 加载Form,不重复显示,自动定位打开页面
- 解决Easyui Tab href 加载对话框中form重复提交问题
- easyui-tree之非异步加载并打开tab页面
- easyUI的form表单重复提交处理
- 关于form页面刷新重复提交的解决方法
- iframe中通过form提交动态加载页面
- 通过jquery load在list页面多次加载详情页,导致的多form校验以及提交问题
- easyui关闭tab和tab页面间加载数据处理
- 解决form表单重复提交以及多页面提交问题
- 解决easyui的tab页面中form验证失效
- FORM表单防止页面重复提交
- easyui表单提交验证form
- Easyui Form表单提交
- js 在一个页面两个submit 提交同一个form 到不同的action
- 一个表单form、submit提交到多个不同页面
- 在JSF中防止页面刷新重复提交
- jquery实现form表单提交后局部刷新页面的多种方法