17

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:

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:

Community
  • 1
  • 1
Adam Plocher
  • 13,994
  • 6
  • 46
  • 79

1 Answers1

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Adam Plocher
  • 13,994
  • 6
  • 46
  • 79
  • Thanks. Mine worked without the .parent.css(...) bit anyway (jQuery UI - v1.10.2) – Stefano Altieri May 24 '13 at 10:21
  • 1
    This works! but is this the way it is supposed to be handled as per Jquery team? It sure looks like a hack – Rajiv Oct 24 '13 at 16:21
  • 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. – Adam Plocher Oct 24 '13 at 18:17
  • 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 %>" – Daniel Dec 02 '13 at 20:14
  • Perfect. This saved me tearing out what's left of my hair. – immutabl Feb 12 '14 at 14:36
  • I don't know how you knew this but thanks, you jsut saved me hours of work ! – WizLiz Jun 19 '14 at 13:35
  • 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'); – J Slick Aug 11 '14 at 15:46