Showing a dialog from an ajax callback

paulhickman

I have a scenario as follows:

1. My data table editor has a custom ajax callback for the create/edit/remove actions

2. In the error handler for my ajax function, if I detect error code 401, I display a login dialog over the still-open editor using jQueryUI to ask the user to re-enter their credentials, as the likely cause is their server-side session timed out because they left the editor open a long time.

3. One the user enters the credentials and submits the dialog, I then run a different ajax call to log the user in and if that is successful, I then re-execute the ajax call from the data table editor and invoke its original callback when it succeeds.

The problem is when the jQueryUI dialog opens in front of the editor and the user clicks on a text box/button within it, the editor code to prevent it losing focus kicks in:

if ( $(document.activeElement).parents('.DTE').length === 0 ) {
    if ( that.s.setFocus ) {
        that.s.setFocus.focus();
    }
}

This then causes similar code in jQueryUI to do the same and the browser eventually runs out of stack space from infinite recursion.

I've prevented it by adding the following the the dialog's on open event handler:

open: function () {
    if (!$(this).parent(".ui-dialog").parent().hasClass("DTE")) {
        $(this).parent(".ui-dialog").parent().addClass("DTE");
    }
}

However, I don't think giving other parts of the page the DTE class is necessarily the brightest idea. Is this going to break something else I haven't thought of?

Is there a better way of allowing a popup to take focus from within an editor?