jQuery UI onglets et de dialogue - Comment confirmer le passage des onglets avec confirmation en fonction du plug-in de dialogue?

Question

Ainsi, l'objectif est de confirmer le passage à un autre onglet de l'interface utilisateur en utilisant l'interface utilisateur plug-in de dialogue. En utilisant la méthode de confirmation commune est simple:

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

mais comment pour atteindre même comportement en utilisant la boîte de dialogue modale?

Je pense que je dois appeler:

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

sur le « rappel ok », mais cela ne fonctionne pas comme je m'y attendais. En outre - il n'y a pas d'erreurs signalées ...

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

La source de votre problème est que window.confirm bloque et la boîte de dialogue de jQuery UI est pas. Vous pouvez contourner ce problème en structurant votre code différemment. Voici une des nombreuses approches possibles:

$(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');
             }
        }
    });
});