dialog plugin broken under Apex 5 EA3

[martindsouza]

Copied from: ClariFit/apex_plugins#1

The dialog plugin does not work properly under Apex 5 EA3. The dialog pops up, but it appears that the overlay interferes with mouse clicks on items and buttons. The items and buttons are accessible via tabbing. This testing occurred under theme 26 (Productivity theme).

When opening the dialog after closing it (via the escape key, since other options are not available), the dialog does not open at all, but the overlay comes up.

My suspicion is this has to do with the upgrade in jQuery-UI, but so far I haven't been able to debug it.

[martindsouza]

Copied from ClariFit/apex_plugins#1

Your suspicion is correct. This is the result of an unfortunate interaction between a change in behavior of jQuery UI dialog and a common practice for using jQuery UI dialogs with APEX.

APEX 4.2 is using jQuery UI 1.8.22 In this version dialog stacking was accomplished by manipulating the z-order relative to other dialogs and the overlay. But even here the dialogs are moved to the end of the document body.

APEX 5.0 is using jQuery UI 1.10.4 In version 1.10.0 jQuery UI switched their implementation of dialog stacking to use moving the dialog in the DOM technique. There are major trade offs
with each method. APEX 5.0 has put effort into making sure dialogs work in the APEX environment.

In both implementations moving the dialog out of its normal DOM position and putting it at the end means it is now outside the APEX form element. This means that page items in the dialog are not submitted. The common practice to make jQuery UI dialogs work in APEX was to move the dialog back to where it was just after it is created. This breaks with the new jQuery version.

If you can switch to using APEX 5.0 inline dialogs or modal dialog pages that would be best.

If not you can try the following as a work around. Add this code to any pages that use the ClariFit dialog plugin. Add to the Execute when Page Loads attribute:

$(document.body).on("cfpluginapexdialogcreate", function(event) {
var dialog$ = $(event.target);
// put the dialog back at the end of the document
setTimeout(function() {
$(document.body).append(dialog$.parent());
}, 1);
// allow submit from dialog to work
$(apex.gPageContext$).on("apexpagesubmit.closedlg", function() {
dialog$.dialog( "close" ).css( "display", "none" );
} );
dialog$.on("cfpluginapexdialogclose.closedlg", function() {
$(apex.gPageContext$).off(".closedlg");
dialog$.off(".closedlg");
});
});