[ACCEPTED]-jQuery UI Dialog with ASP.NET button postback-postback

You are close to the solution, just getting 1 the wrong object. It should be like this:

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

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

Using this code solved my problem and it 4 worked in every browser, Internet Explorer 7, Firefox 3 3, and Google Chrome. I start to love jQuery... It's 2 a cool framework.

I have tested with partial 1 render too, exactly what I was looking for. Great!

<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>

FWIW, the form:first technique didn't work 3 for me.

However, the technique in that blog 2 article did:

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

Specifically, adding this to 1 the dialog declaration:

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

Be aware that there is an additional setting 4 in jQuery UI v1.10. There is an appendTo setting 3 that has been added, to address the ASP.NET workaround 2 you're using to re-add the element to the 1 form.

Try:

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

ken's answer above did the trick for me. The 9 problem with the accepted answer is that 8 it only works if you have a single modal 7 on the page. If you have multiple modals, you'll 6 need to do it inline in the "open" param 5 while initializing the dialog, not after 4 the fact.

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

If you do what the first accepted 3 answer tells you with multiple modals, you'll 2 only get the last modal on the page working 1 firing postbacks properly, not all of them.

Primarily it's because jQuery moves the 4 dialog outside of the form tags using the 3 DOM. Move it back inside the form tags and 2 it should work fine. You can see this by 1 inspecting the element in Firefox.

I didn't want to have to work around this 8 problem for every dialog in my project, so 7 I created a simple jQuery plugin. This plugin 6 is merely for opening new dialogs and placing 5 them within the ASP.NET form:

(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>

So to use the plugin, you 4 first load jQuery UI and then the plugin. Then 3 you can do something like the following:

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

To 2 be clear, this plugin assumes you are ready 1 to show the dialog when you call it.

I know this is an old question, but for 3 anyone who have the same issue there is 2 a newer and simpler solution: an "appendTo" option 1 has been introduced in jQuery UI 1.10.0

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

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

Fantastic! This solved my problem with ASP:Button 4 event not firing inside jQuery modal. Please 3 note, using the jQuery UI modal with the 2 following allows the button event to fire:

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

The 1 following line is the key to get this working!

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

I just added the following line after you 1 created the dialog:

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

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 3 the content inside the dlg2 will be available 2 to insert in your database. Don't forget 1 to change the dialog variable to match yours.

With ASP.NET just use UseSubmitBehavior="false" in your ASP.NET button:

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

Reference: Button.UseSubmitBehavior Property

0

Move the dialog the right way, but you should 6 do it only in the button opening the dialog. Here 5 is some additional code in jQuery UI sample:

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

Add 4 your asp:button inside the dialog, and it runs well.

Note: you 3 should change the <button> to <input 2 type=button> to prevent postback after you 1 click the "create user" button.

The solution from Robert MacLean with highest 5 number of votes is 99% correct. But the 4 only addition someone might require, as 3 I did, is whenever you need to open up this 2 jQuery dialog, do not forget to append it 1 to parent. Like below:

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

Use this line to make this work while using 1 the modal:true option.

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

The $('#dialog').parent().appendTo($("form:first")) solution works fine in IE 9. But in 8 IE 8 it makes the dialog appear and disappear 7 directly. You can't see this unless you 6 place some alerts so it seems that the dialog 5 never appears. I spend one morning finding 4 a solution that works on both versions and 3 the only solution that works on both versions 2 8 and 9 is:

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

Hope this helps others that are 1 struggeling with the same issue

The exact solution is;

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

0