jQuery modal dialog with postbacks in ASP.NET

Question

I just upgraded my jQuery/jQuery UI to the latest version (jQuery 1.9.0, jQuery UI 1.10.0), and it seems to have broken some of my jQuery UI dialog functionality.

In order to do postbacks in a jQuery UI dialog in ASP.NET, there was a pretty common workaround where you would have to re-append your DIV to the main FORM, since jQuery would re-construct the DIV outside the FORM, like so:

$("#newInsurance").dialog({
    autoOpen: false,
    modal: true,
    open: function (type, data) {
        $(this).parent().appendTo($("form:first"));
    }
});

Unfortunately, since upgrading this now puts the Dialog behind the gray/disabled overlay for the background. So the form in the Popup is unusable and all grayed out. I've tried several things and I can't seem to get it to work - it seems as if this old work-around no longer works. Does anyone know of a new work-around that will work? Or am I missing something? This worked great up until I upgraded.

Here is some more information about the work-around that USED to work:

• Stack Overflow question jQuery UI Dialog(Modal), prevents any postback

• Stack Overflow question $(“#dialog”).parent().appendTo($(“form:first”));

• Stack Overflow question jQuery modal form dialog postback problems

I tested this with Internet Explorer 9 and Google Chrome 24.x

According to the jQuery UI website, the Dialog API has been completely redesigned in jQuery UI 1.10.0:

Answer 1

OK, so this seems to be the fix for jQuery UI v1.10:

$("#newInsurance").dialog({
    autoOpen: false,
    appendTo: "form",
    modal: true
}).parent().css('z-index', '1005');

In jQuery UI v1.10 they added an appendTo property, which seems to do the same exact thing as calling .parent().appendTo($("form")). The trick to the fix is the z-index.