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 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
详解React 条件渲染
Jul 08 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查看当前Session的ID实例
2015/03/16 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
JavaScript 比较时间大小的代码
2010/04/24 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
深入理解Node.js的HTTP模块
2016/10/12 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
python与caffe改变通道顺序的方法
2018/08/04 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
仓库保管员岗位职责
2013/12/20 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
党支部鉴定意见
2015/06/02 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android