Comment recharger un onglet jquery dans un formulaire?

Question

J'utilise jquery pour les onglets ajax, non JQuery UI qui est trop grand pour mes besoins Ce code ci-dessous est mes onglets ajax, il charge l'onglet sélectionné avec un fichier externe

J'ai aussi un pour qui utilise ajax pour publier des données sur cette page HOMEfriendstatus.inc.php qui est # tab2

Ce que je veux savoir lorsque je soumets le formulaire, quel que soit l'onglet que l'utilisateur a chargé à l'écran, puis-je le faire recharger ou passer à # tab2 pour afficher le contenu mis à jour de # tab2?

<script type="text/javascript"> 
var pageUrl = new Array();   
pageUrl[1] = "HOMEbulletin.inc.php"; 
pageUrl[2] = "HOMEfriendstatus.inc.php"; 
pageUrl[3] = "HOMEbulletin.inc.php"; 



function loadTab(id){ 
    if (pageUrl[id].length > 0){ 
     $("#loading").show(); 
     $.ajax({url: pageUrl[id], cache: false, success: function(message) {        
      $("#tabcontent").empty().append(message); 
      $("#loading").hide();    
     } 
    });     
} 
} 

$(document).ready(function(){ 
    /*$("#tab1").addClass('selected');*/ 
    $("#loading").hide(); 
    $("#tab1").click(function(){ 
     loadTab(1); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

    $("#tab2").click(function(){ 
     loadTab(2); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

    $("#tab3").click(function(){ 
     loadTab(3); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 
    }); 
</script> 

Answer 1

Avez-vous essayé d'exécuter loadTab(2) dans le formulaire de rappel de succès? Cela devrait suffire.

Vous ne nous ont pas montré votre code pour envoyer formulaire via AJAX, mais je suppose que quelque chose de semblable devrait fonctionner:

$.post('http://example.com/ajax/form', $('form').serialize(), 
    function (data, textStatus) { 
     loadTab(2); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $('#tab2').addClass('selected'); 
    } 
); 

Notez que le code fait double emploi avec la fonction $("#tab2").click() de sorte que vous devriez envisager d'utiliser la fonction nommée au lieu d'anonyme dans ce cas et de le réutiliser dans le rappel ajax:

function loadSecondTab() { 
    loadTab(2); 
    $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
    $('#tab2').addClass('selected'); 
} 

$('#tab2').click(loadSecondTab); 
$.post('http://example.com/ajax/form', $('form').serialize(), loadSecondTab); 

PS. L'interface utilisateur de jQuery n'est pas trop grande. Vous n'avez pas besoin d'utiliser tous les bits. Vous pouvez facilement charger le module onglets.