http://blog.csdn.net/fxz1982/article/details/8987769

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关闭时手动找到这个对象删除掉.

加载时的代码:

  1. $('#my-tabs').tabs('add',{
  2. title: title,
  3. href : url,//内容页面的地址
  4. border : false,
  5. closable:true,
  6. id : title,
  7. extractor: function(data){
  8. //抽取body中的内容
  9. var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
  10. var matches = pattern.exec(data);
  11. if (matches){
  12. data = matches[1];
  13. }
  14. var tmp = $('<div/>').html(data);
  15. var divs = $(tmp).find('[id]');
  16. var ids = [];
  17. for(var i=0;i<divs.length;i++){
  18. ids.push(divs[i].getAttribute("id"));
  19. }
  20. //记录本tab中的所有带ID的DIV
  21. $('#base-tabs').tabs('getTab',title).divs = ids;
  22. return data;
  23. }

关闭时的动作:

    1. $('#my-tabs').tabs({
    2. autoWidth:true,
    3. onBeforeClose:function(title,index){//关闭面板前把此功能的资源释放
    4. var tab =  $(this).tabs('getTab',index);
    5. //准备删除的DIV内容
    6. $('#my-tabs').attr("rmdiv",tab.divs);
    7. },onClose : function(){//删除被关闭tab中用到的DOM对象
    8. var divs = $('#my-tabs').attr("rmdiv").split(",");
    9. for(var i=0;i<divs.length;i++){
    10. var divTarget = $('#'+divs[i]);
    11. if(divTarget){
    12. divTarget.remove();
    13. }
    14. }
    15. }
    16. });

easyui的tab加载页面中的form重复提交的更多相关文章

  1. 加载 页面 中js 方法

    js 文件中 var mingchen= mingchen|| {    init: function (){ } }; 文件中 mingchen.init(); 注意问题: 在新加载 页面中     ...

  2. EasyUI的window加载的页面不执行js问题说明

    http://364434006.iteye.com/blog/1671907 ———————————————————————————————————————————————————————————— ...

  3. IE8中jQuery.load()加载页面不显示的原因

    一.jQuery.load() jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中. url :请求服务器的地址 dat ...

  4. 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...

  5. jquery动态加载并解决被加载页面js失效问题

    代码布局结构分为 header  left  content html代码如下: <!DOCTYPE html> <html lang="zh-CN"> & ...

  6. 【转】关于easyui tab 加载 js ajax 不走后台的问题, 怕找不到 以防万一

    一直以来群里里面很多人反应,在用tab加载界面的时候,界面里面的js不会执行.今天在此说明一下原因. 不管是window,dailog还是tab其实质最终都是继承了panel.panel有两种方式展示 ...

  7. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  8. 关于IE8中使用Jquery load方法无法正常加载页面

    最近发现,在IE8中使用Jquery load方法时无法正常加载页面,页面显示空白,没有加载.调试发现,页面多了一个</div>标签,但在FF和CH下表现正常.希望能给遇到同样问题的码农有 ...

  9. PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

    PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...

随机推荐

  1. # 2017-2018-2 20155319『网络对抗技术』Exp2:后门原理与实践

    2017-2018-2 20155319『网络对抗技术』Exp2:后门原理与实践 1.实验准备 一.实验说明 任务一:使用netcat获取主机操作Shell,cron启动 (0.5分) 任务二:使用s ...

  2. Exp1 逆向与bof基础

    20155332<网络对抗>Exp1 逆向与bof基础 1.实验目的 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简 ...

  3. R绘图 第六篇:绘制线图(ggplot2)

    线图是由折线构成的图形,线图是把散点从左向右用直线连接起来而构成的图形,在以时间序列为x轴的线图中,可以看到数据增长的趋势. geom_line(mapping = NULL, data = NULL ...

  4. (2)学习笔记 ) ASP.NET CORE微服务 Micro-Service ---- .NetCore启动配置 和 .NetCoreWebApi

    什么是.Net Core?.Net Core是微软开发的另外一个可以跨Linux.Windows.mac等平台的.Net.Net Core相关知识看文章地步dotnet dllname.dll 运行P ...

  5. Unity日记—对象缓存池

    最近都在忙别的事了,今天忙里偷闲了解了一下对象池是啥玩意,简单记录一下. 还是个正在学习的萌新,如果写的不好请见谅. 1.对象池是啥 在了解对象池之后,我才意识到以前写的代码有多么蠢,当场景中有一些重 ...

  6. java 软件开发面试宝典

    一. Java 基础部分........................................................................................ ...

  7. 用 C 语言描述几种排序算法

    排序算法是最基本且重要的一类算法,本文基于 VS2017,使用 C 语言来实现一些基本的排序算法. 一.选择排序 选择排序,先找到数组中最小的元素,然后将这个元素与数组的第一个元素位置互换(如果第一个 ...

  8. PHPMyWind5.4存储XSS后续getshell提权

    0x0 前言 通过留言处的xss,我们可以得到管理员的cookie,进而登陆后台: https://www.cnblogs.com/Rain99-/p/10701769.html 现在要从后台入手,进 ...

  9. es6箭头函数使用场景导致的一些问题

    1. 今天在使用draggable组件时,监听dragmove事件时获取到的事件对象有一些异常, 代码如下 draggable.on('drag:move', (event) => { cons ...

  10. think in UML(二)

    基础篇——在学习中思考! 在大概了解了UML之后就该系统的学习UML的主要建模元素了,一个个实例帮助我们更好的理解这些元素的重要性并运用相关知识解决实际问题. 在UML里有一个概念叫版型,有些书里也称 ...