jQuery UI Dialog with ASP.NET button postback

Question

I have a jQuery UI Dialog working great on my ASP.NET page:

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

More information: I added this code to move div to form:

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

But still without success...

Answer 1

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

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

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

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

Answer 2

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

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

The following line is the key to get this working!

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

Answer 3

The exact solution is;

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Try:

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