jQuery modal dialog with postbacks in ASP.NET

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:

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating