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:

Aurochs

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.

Aurochs

Thanks. Mine worked without the .parent.css(...) bit anyway (jQuery UI - v1.10.2) – Wesley

This works! but is this the way it is supposed to be handled as per Jquery team? It sure looks like a hack – Courcy

I'm really not sure. I fought with this for quite a while and looked everywhere before trying something that worked. There might be more information available now on it, but when I implemented this was recently after JUI 1.10 was released and I couldn't find anything. – Aurochs

Just a quick explanation, this problems happen because the objects are moved outside of ASP.NET form when you create the dialog, If you are using an Update Panel, you should appendTo the Update´s panel. Something like appendTo: "#<%=MyUpdatePanel.ClientID %>" – Apparent

Perfect. This saved me tearing out what's left of my hair. – Poseur

I don't know how you knew this but thanks, you jsut saved me hours of work ! – Southport

I was using jQuery UI 1.11 just fine with Chrome 36.x, but IE-11.x would not place the dialog at top Z. Changing the z-index in the open method did nothing. However, the above solution fixed it for IE-11: }).parent().css('z-index', '1005'); – Endodontics