Onglets Jquery: modifiez les données ajax sur l'onglet cliquez sur

Question

J'ai utilisé les onglets jquery pour charger les données avec ajax, mais j'ai besoin d'ajouter des paramètres à l'URL lorsque l'utilisateur clique dans un onglet. Je ne connais pas les paramètres à l'avance car ils proviennent d'un formulaire qui a été rempli par l'utilisateur. J'ai donc essayé quelque chose comme le code suivant, mais je ne comprends pas travailler:

<div id="tabs"> 
    <ul> 
     <li><a href="${tab1_url}">Tab 1</a></li> 
     <li><a href="${tab2_url}">Tab 2</a></li> 
     <li><a href="${tab3_url}">Tab 3</a></li> 
    </ul> 
</div> 

et je sérialiser la forme d'un tableau et rejoindre le tableau au tableau contenant les données SATIC.

var staticData = [{name:'id',value:'${myId}'}]; 
$("#tabs").tabs({ 
    var $tabs = $("#tabs").tabs({ 
     ajaxOptions: { data: staticData}, 
     select: function(event, ui) { 
      var dynamicData = $("#common_form").serializeArray(); 
      var dataToSend = staticData.concat(dynamicData); 
      $("#tabs").tabs("option", "ajaxOptions", { 'data': dataToSend }); 
      return true; 
     } 
    }); 
}); 

mais cela ne met pas à jour les données ajax après les onglets sont créés (je vois la demande envoyée avec Firebug et il ne comprend que les params initiales).

Comment puis-je modifier les données ajax lorsque l'utilisateur clique sur l'onglet?

Merci

ÉDITÉE: maintenant avec ce code fonctionne

Answer 1

Je pense que ce que vous cherchez est la méthode "url":

http://jqueryui.com/demos/tabs/#method-url

code Vous regarderait quelque chose comme ça:

$(function(){ 
    $("#tabs").tabs({ 
     select: function(event, ui) { 
      var data = $("#common_form").serialize();    
      if(ui.index == 1){ 
       var url = '${tab2_url}' + "&" + data; 
       $("#tabs").tabs("url", 1, url); //this is new ! 
      } 
      return true; 
     } 
    }); 
}); 

Answer 2

<div id="tabs"> 
    <ul> 
     <li><a href="" name="tab" id="tab1">Tab 1</a></li> 
     <li><a href="" name="tab" id="tab2">Tab 2</a></li> 
     <li><a href="" name="tab" id="tab3">Tab 3</a></li> 
    </ul> 
</div> 

Code Jquery ...

jQuery(document).ready(function($){ 
$("a[name=tab]").click(function(e){ 
if($(this).attr('id')=="tab1") 
{ 
//pass url1 
} 
if($(this).attr('id')=="tab2") 
{ 
//pass url2 
} 
if($(this).attr('id')=="tab3") 
{ 
//pass url3 
} 

}); 
}); 

Answer 3

jQuery(document).ready(function($){ 
$("a[name=tab]").click(function(e){ 
if($(this).attr('id')=="tab1") 
{ 
//pass url1 
} 
if($(this).attr('id')=="tab2") 
{ 
//pass url2 
} 
if($(this).attr('id')=="tab3") 
{ 
//pass url3 
} 

}); 
}); 

Ce travail pour moi, mais si j'ai besoin pour les ex 100 tabs i besoin de mettre en toutes les URL 100 onglets.