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

具体表现为：
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种方法，服务器事件可以响应，效果也不错，可以优先考虑。

赞 (0)

相关推荐

  • jQuery前端框架easyui使用Dialog时bug处理

    jQuery前端框架easyui使用Dialog时bug处理

    最近一直都在用easyui前端框架来开发设计UI,但在使用Dialog时,发现如果页面内容比较多,就会出现问题,首先看一下我的原代码: 复制代码 代码如下: <input type="button" value="确认预约" id="btnconfirm" onclick="javascript:openconfirmDlg();" />     <div id="confirmd">

  • jquery ui dialog ie8出现滚动条的解决方法

    此问题在UI1.7就出现,到了UI1.8也未修复,真不知道该怎么说好.. JQUI 开发提交BUG的帖子:http://dev.jqueryui.com/ticket/3623 解决办法相当不科学~ 我的解决办法,个人感觉好过那个,因为我只隐藏横的滚动条,呵呵 附上修改的代码: 修改:jquery.ui.dialog.js 复制代码 代码如下: var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-w

  • 基于jquery ui的alert,confirm方案（支持换肤）

    实现功能: 1.修改标题样式.把jquery ui的标题样式放上去.支持换肤. 2.修改按钮样式,换成jqueryui的button按钮样式. 3.将模式化窗口的背景换成了jqueryui的模式化背景. 代码: //首先要引入jquery,以及ui的包和皮肤的样式如: <script src="../js/ui/jquery-1.11.0.min.js"></script> <script src="../js/ui/jquery-migrate

  • 浅析JQuery UI Dialog的样式设置问题

    最近在用一个JQUERY UI Dialog的插件,感觉特别强大,但样式设置比较麻烦,研究了俩天终于搞定了. 运行插件,需要的环境如下 <script src="../../JS/jquery-1.4.2.js" type="text/javascript"></script> <script src="../JS/jquery.ui.js" type="text/javascript">&

  • jquery ui dialog替代confirm实例分析

    本文实例讲述了jquery ui dialog替代confirm的方法.分享给大家供大家参考,具体如下: js的confirm,有的浏览器会直接屏蔽掉,导致功能无法使用,推荐使用jquery ui 的dialog功能,完美替换confirm功能 1.html代码 <div id="confirm_dialog" title="提示" style="display:none;"> </div> 把上面代码放到公用的地方 2.

  • Confirmer JQuery确认对话框组件

    Confirmer JQuery确认对话框组件

    插件截图: 用途:点击链接或按钮时要确认是否继续当前操作. 插件代码: 复制代码 代码如下: (function($){ $.fn.confirmer = function(options){ var defaults = { msg:"Are you sure to delete it ?" } var options = $.extend(defaults, options); var control=$(this); $(control).click(function(){ret

  • jQuery UI插件自定义confirm确认框的方法

    本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d

  • jQuery UI Dialog 创建友好的弹出对话框实现代码

    主要参数 jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: {"确定":function(){},"取消":function(){}} [{text:"确定", click: function(){}},{text:"取消",click:function(){}}] 3.mod

  • 自编jQuery插件实现模拟alert和confirm

    自编jQuery插件实现模拟alert和confirm

    啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了... 来看插件的实现代码吧: (function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btnOk(); //alert只是弹出消息,因此没必要用到回调函数callback btnNo(); }, Confirm: fun

  • jquery插件jquery.confirm弹出确认消息

    jquery插件jquery.confirm弹出确认消息

    本文为大家介绍了插件jquery.confirm弹出确认消息的实现方法,具有一定的参考价值,特分享给大家供大家参考,具体内容如下 实现效果: 具体代码: 1.插件默认参数 // 默认参数 $.confirm.defaults = { // 样式 css: "http://static.qianduanblog.com/css/jquery.confirm/default.min.css?v=" + Math.ceil(new Date() / 86400000), // 确认框内容 c

  • jQuery EasyUI API 中文文档 - Dialog对话框

    jQuery EasyUI API 中文文档 - Dialog对话框

    扩展自 $.fn.window.defaults,用 $.fn.dialog.defaults 重写了 defaults. 依赖 window linkbutton 用法 复制代码 代码如下: <div id="dd" title="My Dialog" style="width:400px;height:200px;"> Dialog Content. </div> 复制代码 代码如下: $('#dd').dialog(

  • jQueryUI的Dialog的简单封装

    写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙.思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见. DialogHelper的源代码如下: 复制代码 代码如下: //--对话框辅助对象-begin //现在这个对象只是简单的封装(未来可能会复杂些). //其作用就是简化jQuery UI的dialog的的调用方式,不在需要改动

随机推荐