jQuery UI Dialog控件中的表单无法正常提交的解决方法


Posted in Javascript onDecember 19, 2010

最近使用jQuery UI的Dialog控件时发现如果在此控件放置表单,则所有表单均无法正常提交,具体表现为:
1.提交按钮失效,点击后无任何反应。

2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据。

研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了 动态生成的HTML元素内。也就是说,原先在form内的表单在Dialog初始化后就被移到form外了,这就导致了Dialog模板内表单全部失效。

不知jQuery UI的Dialog这样设计是一项功能还是一个bug。为了在Dialog内实现正常的页面提交,根据上述分析,我找到一个简单的解决办法——在jQuery UI控件的“open”事件处理程序中将Dialog控件动态生成的HTML元素移到form元素内,代码如下:

$("#dlg").dialog({ 
open: function () { 
$("body > div[role=dialog]").appendTo("form#aspnetForm"); 
} 
});

代码中的“aspnetForm”是ASP.NET应用程序自动生成的当前页面form元素ID,使用时你可以换成自己页面的form ID。
Javascript 相关文章推荐
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 #Javascript
有关js的变量作用域和this指针的讨论
Dec 16 #Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 #Javascript
jquery中动态效果小结
Dec 16 #Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 #Javascript
Javascript学习笔记二 之 变量
Dec 15 #Javascript
Javascript学习笔记一 之 数据类型
Dec 15 #Javascript
You might like
php 冒泡排序 交换排序法
2011/05/10 PHP
跟我学Laravel之视图 & Response
2014/10/15 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
Prototype Date对象 学习
2009/07/12 Javascript
jQuery each()小议
2010/03/18 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
JS的get和set使用示例
2014/02/20 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
Python 创建子进程模块subprocess详解
2015/04/08 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
python 显示数组全部元素的方法
2018/04/19 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
超级实用的8个Python列表技巧
2020/08/24 Python
python批量修改文件名的示例
2020/09/27 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
欢度春节标语
2014/07/01 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
工作失职自我检讨书
2015/05/05 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js