jQuery UI Dialog控件中的表单无法正常提交的解决方法
更新时间：2010年12月19日 22:02:47 作者：
研究了页面源码后发现，jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面，而原始的Dialog模板部分（其内包含表单元素）也被移到了 动态生成的HTML元素内。
最近使用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。
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。
相关文章
这篇文章主要介绍了jQuery函数的第二个参数获取指定上下文中的DOM元素,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了如何使用jquery序列化表单去除指定元素,需要的朋友可以参考下2014-04-04
jquery中获得$.ajax()事件返回的值并添加事件的方法
如果想获得$.ajax()中返回的值，直接用在success:funciton(){return xx} 是不可以的，要想获得xx的值，要在script中，使用全局变量。利用全局变量引出xx的值。2010-04-04
本文给大家分享的是jquery顶部浮动弹出层，点击浮动层动画弹出层，弹出层从顶部动画滑动效果，效果非常不错，推荐给大家。2015-08-08
这篇文章主要是对同域jQuery(跨)iframe操作DOM的示例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
本文给大家介绍基于jiquery实现div窗口震动特效代码，需要的朋友可以参考下2015-08-08
Jquery中使用show()与hide()方法动画显示和隐藏图片
以前我们在js中如果要隐藏显示一个元素我们需要利用display等于none来设置并且还没有效果，现在在jquery中有了hide();我们可以利用hide()方法来操作，希望本文章给大家所有帮助。2015-10-10
这篇文章主要介绍了如何利用jQuery+css+html模拟实现淘宝购物车模块，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起动手尝试一下2022-03-03
这篇文章主要介绍了jQuery操作input值的各种方法总结，有需要的朋友可以参考一下2013-11-11
今天看到一个jquery插件jquery.fileupload.v.1.5.0，自己试着结合java做了一个ajax的文件上传小应用2009-03-03
最新评论