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并非所有的一切都是对象
Apr 11 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 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
PHP5 安装方法
2006/10/09 PHP
php fckeditor 调用的函数
2009/06/21 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
JS常用函数使用指南
2014/11/23 Javascript
jquery获取节点名称
2015/04/26 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Django 多环境配置详解
2019/05/14 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
公司庆典邀请函范文
2014/01/13 职场文书
全神贯注教学反思
2014/02/03 职场文书
月考总结与反思
2015/10/22 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书