提问



我有一个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');
    });
});


我的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"));


但仍然没有成功......

最佳参考


你接近解决方案,只是得到错误的对象。它应该是这样的:


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"));
});

其它参考1


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


使用此代码解决了我的问题,它适用于所有浏览器,Internet浏览器  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>

其它参考2


FWIW,形式:第一种技术对我不起作用。


但是,该博客文章中的技术做到了:


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


具体来说,将其添加到对话框声明中:


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

其它参考3


请注意,jQuery UI v1.10中还有一个附加设置。已添加 appendTo 设置,以解决您用于将元素重新添加到表单的ASP.NET变通方法。[29] [30]


尝试:


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

其它参考4


ken 上面给出的答案对我有用。接受答案的问题是,只有在页面上有一个模态时它才有效。如果你有多个模态,你需要在初始化对话框时,在打开参数中内联,而不是在事实之后。


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


如果你做的第一个接受的答案告诉你多个模态,你只会得到页面上的最后一个模态正确地触发回发,而不是全部。

其它参考5


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

其它参考6


我不想为我的项目中的每个对话框解决这个问题,所以我创建了一个简单的jQuery插件。这个插件仅用于打开新的对话框并将它们放在ASP.NET表单中:[33]


(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 (i.e. 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!


需要说明的是,此插件假设您在调用对话框时已准备好显示对话框。

其它参考7


太棒了!这解决了我的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"))

其它参考8


我知道这是一个老问题,但对于任何有相同问题的人来说,有一个更新更简单的解决方案:jQuery UI 1.10.0中引入了appendTo选项


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


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

其它参考9


我在创建对话框后添加了以下行:


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

其它参考10


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


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变量以匹配您的变量。

其它参考11


使用ASP.NET只需在ASP.NET按钮中使用UseSubmitBehavior="false":


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


参考: Button.UseSubmitBehavior属性 [35]

其它参考12


Robert MacLean获得最高票数的解决方案是正确的99%。但是,正如我所做的那样,有人可能需要的唯一补充就是当你需要打开这个jQuery对话框时,不要忘记将它附加到父级。如下所示:


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

其它参考13


使用modal:true选项时,使用此行可以使其工作。


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

其它参考14


$('#dialog').parent().appendTo($("form:first"))解决方案在IE 9中运行良好。但在IE 8中,它使对话框显示并直接消失。你不能看到这个,除非你发出一些警告,所以似乎对话框永远不会出现。
我花了一个上午找到适用于这两个版本的解决方案,唯一适用于版本8和9的解决方案是:


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


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

其它参考15


以正确的方式移动对话框,但您应该只在打开对话框的按钮中执行此操作。
以下是jQuery UI示例中的一些其他代码:


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


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


注意:您应该将< button>更改为< input type=button>以防止在单击创建用户按钮后进行回发。

其它参考16


确切的解决方案是;


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