jQuery UI Focus Issue

Question

I am getting Issue

unable to get property'_focusTabbable'of undefined or null reference

I am using Jquery-ui-1.10.2.custom.js

Here I am getting issue in

if ( !$.ui.dialog.overlayInstances ) {
    // Prevent use of anchors and inputs.
    // We use a delay in case the overlay is created from an
    // event that we're going to be cancelling. (#2804)
    this._delay(function() {
        // Handle .dialog().dialog("close") (#4065)
        if ( $.ui.dialog.overlayInstances ) {
            this.document.bind( "focusin.dialog", function( event ) {
                if ( !that._allowInteraction( event ) ) {
                    event.preventDefault();
                    **$(".ui-dialog:visible:last .ui-dialog-content")
                        .data( widgetFullName )._focusTabbable();**
                }
            });
        }
    });
}

Answer 1

This bug arises when you open a dialog and then, in an action button of this dialog, call a method that opens a second dialog. When you attempt to close the second dialog, the bug appears.

To prevent this from happening, close the first dialog immediately, and then call the second dialog.

$('#dialog1').dialog({

    buttons: {
        'No': function () {
            $(this).dialog('close')
        },

        'Yes': function () {

            // This works
            $(this).dialog('close');

            // Open second dialog
            OpenSecondDialog()

            // This doesn't work.  A bug will arise when attempting to close the second dialog
            $(this).dialog('close');

        }
    }
});

Answer 2

I'm opening one dialog and then another to confirm changes which were done in the first dialog. When confirming it doesn't close the first dialog which was opened. So I'm just destroying everything to get rid of the focus issue.

$(".ui-dialog-content").dialog('destroy');

I just put this one in the confirm function of the last dialog so it destroys all my dialogs (since they have the same class).