带有ASP.NET按钮回发的jQuery UI对话框

本文翻译自：jQuery UI Dialog with ASP.NET button postback

I have a jQuery UI Dialog working great on my ASP.NET page: 我有一个jQuery UI Dialog在我的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');
    });
});

My div: 我的div：

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

But the btnButton_Click is never called... How can I solve that? 但btnButton_Click永远不会被调用......我该如何解决？

More information: I added this code to move div to form: 更多信息：我添加了此代码以将div移动到表单：

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

But still without success... 但仍然没有成功......

---

#1楼

参考：https://stackoom.com/question/3AzQ/带有ASP-NET按钮回发的jQuery-UI对话框

---

#2楼

The solution from Robert MacLean with highest number of votes is 99% correct. Robert MacLean获得最高票数的解决方案是正确的99％。 But the only addition someone might require, as I did, is whenever you need to open up this jQuery dialog, do not forget to append it to parent. 但是，正如我所做的那样，有人可能需要的唯一补充是，无论何时需要打开这个jQuery对话框，都不要忘记将它附加到父级。 Like below: 如下所示：

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

---

#3楼

This was the clearest solution for me 这对我来说是最清晰的解决方案

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');

All the content inside the dlg2 will be available to insert in your database. dlg2所有内容都可以插入到您的数据库中。 Don't forget to change the dialog variable to match yours. 不要忘记更改dialog变量以匹配您的dialog变量。

---

#4楼

Use this line to make this work while using the modal:true option. 使用modal：true选项时，使用此行可以完成此操作。

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

---

#5楼

The $('#dialog').parent().appendTo($("form:first")) solution works fine in IE 9. But in IE 8 it makes the dialog appear and disappear directly. $('#dialog').parent().appendTo($("form:first"))解决方案在IE 9中运行正常。但在IE 8中，它使对话框显示并直接消失。 You can't see this unless you place some alerts so it seems that the dialog never appears. 除非您发出一些警报，否则您看不到此对话框，因此您无法看到此信息。 I spend one morning finding a solution that works on both versions and the only solution that works on both versions 8 and 9 is: 我花了一个上午找到适用于这两个版本的解决方案，唯一适用于版本8和9的解决方案是：

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

Hope this helps others that are struggeling with the same issue 希望这有助于其他与同一问题相关的人

---

#6楼

The exact solution is; 确切的解决方案是;

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