jQuery UI的Dialog无法提交问题的解决方法


Posted in Javascript onJanuary 11, 2011

具体表现为:
1.提交按钮失效,点击后无任何反应。
2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据。

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

第1种方法:
不知jQuery UI的Dialog这样设计是一项功能还是一个bug。为了在Dialog内实现正常的页面提交,根据上述分析,我找到一个简单的解决办法——在 jQuery UI控件的“open”事件处理程序中将Dialog控件动态生成的HTML元素移到form元素内,代码如下:
使用代码:$("#dialog").parent().appendTo("/html/body/form[0]");
或者
$("#dlg").dialog({
open: function () {
$("body > div[role=dialog]").appendTo("form#aspnetForm");
}
});
代码中的“aspnetForm”是ASP.NET应用程序自动生成的当前页面form元素ID,使用时你可以换成自己页面的form ID。

第2种方法:
加入一个<div id="dialog_target"></div>这样的DIV,然后把Dialog写入这个DIV里面。
$("#dialog").parent().appendTo("#dialog_target");

第3种方法:
1、修改Dialog的JS代码,把代码添加到form中,而不是body里面
2、Dialog内部的自定义HTML不使用,而直接加入一个IFRAME,把里面的HTML移到另外的页面中,再与父页面进行交互就OK(我使用的就是这种方法,这样这些独立出来的代码还可以复用

第2种方法,服务器事件可以响应,效果也不错,可以优先考虑。

Javascript 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 #Javascript
Jquery中获取iframe的代码
Jan 11 #Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 #Javascript
基于jquery的cookie的用法
Jan 10 #Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 #Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 #Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 #Javascript
You might like
php 静态页面中显示动态内容
2009/08/14 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
详解webpack babel的配置
2018/01/09 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
vue实现拖拽进度条
2021/03/01 Vue.js
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python中的字符串内部换行方法
2018/07/19 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Flask处理Web表单的实现方法
2021/01/31 Python
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
毕业实习评语
2014/02/10 职场文书
抽奖活动主持词
2014/03/31 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
学习党章的体会
2014/11/07 职场文书
销售助理岗位职责
2015/02/11 职场文书
大学生求职意向书
2015/05/11 职场文书
教导处教学工作总结
2015/08/12 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers