与ASP.NET按钮回发jQuery UI对话框

我有一个jQuery UI对话框在我的ASP.NET页面上工作得很好：

jQuery(function() { jQuery("#dialog").dialog({ draggable: true, resizable: true, show: 'Transfer', hide: 'Transfer', width: 320, autoOpen: false, minHeight: 10, minwidth: 10 }); }); jQuery(document).ready(function() { jQuery("#button_id").click(function(e) { jQuery('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]); jQuery('#dialog').dialog('open'); }); }); 

我的div：

 <div id="dialog" style="text-align: left;display: none;"> <asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" /> </div> 

但是btnButton_Click从来没有被调用…我该如何解决这个问题？

更多信息：我添加了这个代码来移动div形式：

 jQuery("#dialog").parent().appendTo(jQuery("form:first")); 

但仍然没有成功

Answer 1

你靠近解决方案，只是得到错误的对象。 应该是这样的：

 jQuery(function() { var dlg = jQuery("#dialog").dialog({ draggable: true, resizable: true, show: 'Transfer', hide: 'Transfer', width: 320, autoOpen: false, minHeight: 10, minwidth: 10 }); dlg.parent().appendTo(jQuery("form:first")); }); 

Answer 2

 $('#divname').parent().appendTo($("form:first")); 

使用这个代码解决了我的问题，并在每个浏览器，Internet Explorer 7，Firefox 3和Google Chrome中都能正常工作。 我开始喜欢jQuery …这是一个很酷的框架。

我也测试过部分渲染，正是我所期待的。 大！

 <script type="text/javascript"> function openModalDiv(divname) { $('#' + divname).dialog({ autoOpen: false, bgiframe: true, modal: true }); $('#' + divname).dialog('open'); $('#' + divname).parent().appendTo($("form:first")); } function closeModalDiv(divname) { $('#' + divname).dialog('close'); } </script> ... ... <input id="Button1" type="button" value="Open 1" onclick="javascript:openModalDiv('Div1');" /> ... ... <div id="Div1" title="Basic dialog" > <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> postback test<br /> <asp:Button ID="but_OK" runat="server" Text="Send request" /><br /> <asp:TextBox ID="tb_send" runat="server"></asp:TextBox><br /> <asp:Label ID="lbl_result" runat="server" Text="prova" BackColor="#ff0000></asp:Label> </ContentTemplate> <asp:UpdatePanel> <input id="Button2" type="button" value="cancel" onclick="javascript:closeModalDiv('Div1');" /> </div> 

Answer 3

FWIW，形式：第一种技术不适合我。

不过，该博客文章中的技巧是：

http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

具体而言，将这添加到对话声明中：

  open: function(type,data) { $(this).parent().appendTo("form"); } 

Answer 4

请注意，在jQuery UI v1.10中还有一个额外的设置。 有一个appendTo设置已被添加，以解决您正在使用的ASP.NET解决方法重新添加元素到窗体。

尝试：

 $("#dialog").dialog({ autoOpen: false, height: 280, width: 440, modal: true, **appendTo**:"form" }); 

Answer 5

肯以上的答案为我做了诡计。 被接受的答案的问题是，只有在页面上有单个模式时才有效。 如果你有多个模式，你需要在初始化对话框的时候在“open”参数中内联，而不是在事实之后。

 open: function(type,data) { $(this).parent().appendTo("form"); } 

如果你做的第一个接受的答案告诉你多个模态，你只会得到页面上的最后一个模式正常发射回发，而不是所有的。

Answer 6

主要是因为jQuery使用DOM移动表单标签之外的对话框。 将它移回到表单标签内，它应该可以正常工作。 您可以通过检查Firefox中的元素来看到这一点。

Answer 7

我不想为我的项目中的每个对话框都解决这个问题，所以我创建了一个简单的jQuery插件。 这个插件只是用来打开新的对话框并把它们放在ASP.NET窗体中：

 (function($) { /** * This is a simple jQuery plugin that works with the jQuery UI * dialog. This plugin makes the jQuery UI dialog append to the * first form on the page (ie the asp.net form) so that * forms in the dialog will post back to the server. * * This plugin is merely used to open dialogs. Use the normal * $.fn.dialog() function to close dialogs programatically. */ $.fn.aspdialog = function() { if (typeof $.fn.dialog !== "function") return; var dlg = {}; if ( (arguments.length == 0) || (arguments[0] instanceof String) ) { // If we just want to open it without any options // we do it this way. dlg = this.dialog({ "autoOpen": false }); dlg.parent().appendTo('form:first'); dlg.dialog('open'); } else { var options = arguments[0]; options.autoOpen = false; options.bgiframe = true; dlg = this.dialog(options); dlg.parent().appendTo('form:first'); dlg.dialog('open'); } }; })(jQuery);</code></pre> 

所以要使用插件，你首先加载jQuery UI，然后加载插件。 然后你可以做如下的事情：

 $('#myDialog1').aspdialog(); // Simple $('#myDialog2').aspdialog('open'); // The same thing $('#myDialog3').aspdialog({title: "My Dialog", width: 320, height: 240}); // With options! 

要清楚的是，这个插件假设你已经准备好在你打电话时显示对话框。

Answer 8

太棒了！ 这解决了我的问题与ASP：按钮事件不内射jQuery模态。 请注意，使用下面的jQuery UI模式允许触发按钮事件：

 // Dialog Link $('#dialog_link').click(function () { $('#dialog').dialog('open'); $('#dialog').parent().appendTo($("form:first")) return false; }); 

下面这行是获得这个工作的关键！

 $('#dialog').parent().appendTo($("form:first")) 

Answer 9

我知道这是一个古老的问题，但对于有同样问题的人来说，有一个更新，更简单的解决方案：在jQuery UI 1.10.0中引入了“appendTo”选项

http://api.jqueryui.com/dialog/#option-appendTo

 $("#dialog").dialog({ appendTo: "form" .... }); 

Answer 10

在创建对话框之后，我刚刚添加了以下行：

 $(".ui-dialog").prependTo("form"); 

Answer 11

这对我来说是最清楚的解决方案

 var dlg2 = $('#dialog2').dialog({ position: "center", autoOpen: false, width: 600, buttons: { "Ok": function() { $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } } }); dlg2.parent().appendTo('form:first'); $('#dialog_link2').click(function(){ dlg2.dialog('open'); 

dlg2所有内容都可以插入到你的数据库中。 不要忘记改变dialog变量来匹配你的。

Answer 12

使用ASP.NET只需在ASP.NET按钮中使用UseSubmitBehavior="false"即可：

 <asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" UseSubmitBehavior="false" /> 

参考： Button.UseSubmitBehavior属性

Answer 13

罗伯特·麦克莱恩得票最高的解决方案是99％正确的。 但是，像我一样，唯一需要添加的人可能需要打开这个jQuery对话框，不要忘记将其附加到父项。 如下所示：

var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));

Answer 14

在使用模态：true选项的时候使用这一行来完成这个工作。

 open: function (type, data) { $('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form"); }, 

Answer 15

$('#dialog').parent().appendTo($("form:first"))解决方案在IE 9中正常工作。但是在IE 8中，它使对话框直接出现并消失。 你不能看到这个，除非你放置一些警报，所以似乎永远不会出现对话框。 我花了一个上午找到一个解决方案适用于这两个版本，唯一的解决方案，在版本8和9是：

 $(".ui-dialog").prependTo("form"); 

希望这可以帮助那些在同一个问题上苦苦挣扎的人

Answer 16

以正确的方式移动对话框，但只能在打开对话框的按钮中进行。 以下是jQuery UI示例中的一些附加代码：

 $('#create-user').click(function() { $("#dialog").parent().appendTo($("form:first")) $('#dialog').dialog('open'); }) 

在对话框中添加你的asp:button ，它运行良好。

注意：在点击“创建用户”按钮后，应该将<按钮>更改为<输入类型=按钮>以防止回发。

Answer 17

确切的解决方案是;

 $("#dialogDiv").dialog({ other options..., open: function (type, data) { $(this).parent().appendTo("form"); } });