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:

Peter Mortensen · Accepted Answer · 2013-04-11 17:35:44Z

19

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.

edited Apr 11, 2013 at 17:35

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Feb 1, 2013 at 2:51

Adam Plocher

14.3k6 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Stefano Altieri Over a year ago

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

Rajiv Over a year ago

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

Adam Plocher Over a year ago

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.

Daniel Over a year ago

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

immutabl Over a year ago

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

|

Collectives™ on Stack Overflow

jQuery modal dialog with postbacks in ASP.NET

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related