Sélection et validation des onglets JQueryUI

Question

J'essaie de valider le contenu de l'onglet (en utilisant la validation ajax) avant de passer à l'onglet suivant. Ainsi, lorsque l'utilisateur clique sur l'onglet, le contenu de l'onglet actuel est envoyé au serveur pour validation. Et quand le résultat du serveur est reçu je passe à l'onglet suivant. Voici un code:

$('#tabs').tabs({ 
    select: function(event, ui) { 
     ... 
     validate(currentIndex, nextIndex); 
     return false; 
    } 
}); 

function validate(currentIndex, nextIndex){ 
    $.ajax({ 
     ... 
     complete: function(){ 
      $("#tabs").tabs('select', nextIndex); 
     } 
     ... 
    } 
} 

Vous pouvez probablement voir le problème déjà, il est boucle infinie, car la validation provoque gestionnaire de sélection de l'onglet qui provoque la validation et ainsi de suite. Comment pourrais-je résoudre cela sans variables globales?

Merci.

Answer 1

Je ne sais pas si cela fonctionnerait (n'avez pas essayé votre code) mais ne pourriez-vous pas utiliser le .data(key,value) pour ajouter une sorte de drapeau "déjà validé" à vérifier? Vous ajoutez donc une instruction if qui vérifie cela avant d'entrer de nouveau dans la fonction de validation.

Answer 2

S'il vous plaît jeter un coup d'oeil sur this - official Jquery tabs documentation

Votre fonction validate ne devrait pas faire autre chose que de retourner vrai ou faux.

$('#tabs').tabs(
{ 
    select: function(event, ui) 
    { 
     ... 
     return validate(currentIndex, nextIndex); 
    } 
}); 

function validate(currentIndex, nextIndex) 
{ 
    $.ajax(
    { 
     ... 
     success: function(data) 
     { 
      // example response: {"error": 0} 
      if(!data.error) return true; 
      else return false; 
     } 
     ... 
    } 
} 

Lorsque vos onglets (« select » ... fonction retourne false, l'onglet ne basculera pas, si elle est vraie l'onglet passe -. Et vous ne devez pas le faire dans votre fonction de validation