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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
javascript实现完美拖拽效果
May 06 Javascript
Js的Array数组对象详解
Feb 22 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
phplot生成图片类用法详解
2015/01/06 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
浅谈javascript的调试
2015/01/28 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
python实现机器学习之多元线性回归
2018/09/06 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
python统计字符的个数代码实例
2020/02/07 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
晚会开幕词
2015/01/28 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android