jQuery UI Tabs And Dialog - How to confirm switching tabs with confirm based on the Dialog plugin?

Question

So, the goal is to confirm switching to another UI tab using UI Dialog plugin. Using common confirm method is simple:

jQuery("#tabsContainer").tabs({
    select: function(event, ui) {
        return confirm("Some confirmation message...");
    }
});

but how to to achieve same behavior using Dialog modal box?

I think I have to call:

jQuery("#tabsContainer").tabs("select", ui.index);

on the "ok callback" but this is not working as I expected. Also - there are no errors being reported...

jQuery("#tabsContainer").tabs({
    select: function(event, ui) {
        jQuery("#dialogContainer").dialog({
            buttons: {
                'Ok': function() {
                    jQuery("#tabsContainer").tabs("select", ui.index);
                },
                Cancel: function() { return; }
            }
        });
        return false;
    }
});

Answer 1

The source of your problem is that window.confirm is blocking and jQuery UI's dialog is not. You can get around this by structuring your code differently. Here's one of many possible approaches:

$(function() {
    jQuery('#tabsContainer').tabs({
        select: function(event, ui) {
            // only allow a new tab to be selected if the
            // confirmation dialog is currently open.  if it's
            // not currently open, cancel the switch and show
            // the confirmation dialog.
            if (!jQuery('#dialogContainer').dialog('isOpen')) {
                $('#dialogContainer')
                    .data('tabId', ui.index)
                    .dialog('open');
                return false;
            }
        }
    });

    jQuery('#dialogContainer').dialog({
        autoOpen: false,
        buttons: {
            'Ok': function() {
                 // a new tab must be selected before
                 // the confirmation dialog is closed
                 var tabId = $(this).data('tabId');
                 $('#tabsContainer').tabs('select', tabId);
                 $(this).dialog('close');
             },
             'Cancel': function() {
                 $(this).dialog('close');
             }
        }
    });
});