dialog plugin broken under Apex 5 EA3

[cjs]

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.

[jsnyders]

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");
});
});

[martindsouza]

Thank you @jsnyders for the detailed information.

@cjs I won't be able to work on this anytime soon. If you want to fix it please do so and then submit a pull request.

[cjs]

I'm not going to be able to work on this either. I've left Apex development for another field, and my replacement on the site I was working has (a) implemented @jsnyders workaround where necessary and converted to Apex 5 native dialogs otherwise.

[martindsouza]

Moved to: OraOpenSource/apex-plugin-dialog#1

@cjs Can you please inform your old colleague about this move/update?

@jsnyders I have a beta version of the plugin that is for APEX 5.0. It addresses this bug along with some other small 4.2 -> 5.0 changes that needed to be addressed. We should have a stable/tested version on the new site in a few days.

[drumbeg]

With out own implementation of jQuery dialogs, we fixed the overlay issue by adding the "appendTo" property to the dialog constructor itself (instead of performing the append afterwards). Modifying the z-index property of the ui-dialog class so that it was higher than the overlay value also worked for us.

function createModal(pRegionId)
{
  $('#' + pRegionId + 'Modal').dialog(
  {
    modal : true ,
    dialogClass: pRegionId,
    autoOpen : false ,
    height: "auto",
    width: "auto",
    resizable: false,
    show: "drop",
    appendTo: "#wwvFlowForm" // New Property
  });

Thought it might be useful in case you can use it Martin? If you have tried this approach already, it would be great to know if you ran into any issues?