Onglets et dialogue de l'interface utilisateur jQuery - Comment confirmer la commutation des onglets avec la confirmation basée sur le plugin Dialog?

Question

Ainsi, l'objectif est de confirmer le passage à un autre onglet de l'interface utilisateur à l'aide du plugin UI Dialog. 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 cela en structurant votre code différemment. Voici l'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'); 
      } 
     } 
    }); 
});