add_tab_content: ajax call

Version imprimable

Bonjour,

J'utilise jQuery pour afficher et ajouter dynamiquement des contenus aux tabs via des call Ajax.

Mais j'ai un problème que j'arrive pas à résoudre. :calim2:
Le bouton permettant d'ajouter une tab dynamiquement se trouve dans chacune des tabs (il récupère à chaque fois une var contenue dans la tab). Il fonctionne sur la première tab mais pas sur les autres...

Voici mon code :

htpl/php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div id="tabs">
  <ul>  
 
     <?php foreach ($myArticles as $key => $article):?>
     <li><a href="#tabArticle">Article 1 </a></li>
     <?php endforeach;?> 
 
  </ul>
 
   <?php foreach ($myArticles as $key => $article):?>
   <div id="tabArticle">
 
  //display infos article
 
  //button for adding a tab     
   <input type="button" id="add_tab" value="Dupliquer "  />      
   <input type="hidden" name="article" id="add_tab_ajax" value="<? php echo 'article/dupliquer'.
    '?id='.$article->getId().'&ref='.$article->getRef().'&count=' ?>" />     
 
  <?php endforeach;?>  
 
</div>

jQuery/ajax

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
$(document).ready(function()
{ 
 
  $( "#tabs" ).tabs(
    {
      tabTemplate: '<li><a href="#{href}">#{label}</a> ' +
            '<span class="closebutton ui-icon ui-icon-close">Remove Tab</span></li>',
      add: function( event, ui ) 
      {
        var content = getContent( counter );  
 
        $( ui.panel ).append( content );             
        $( "#tabs" ).tabs( "select",'#' + ui.panel.id);
      }
 
    });  
 
  function addTab() 
  {
   var title = "Article .." ;     
   $( "#tabs" ).tabs( "add", "#newArticle" + counter, title );
   counter++;  	
  }
  function getContent(num)
  {     
      var r = $.ajax({
      type: 'GET',
      url: $("#add_tab_ajax").val()+num,
      async: false
    }).responseText;
    return r;
  }
 
var counter = $( "#tabs" ).tabs("length");
 
$("#add_tab").click(function(){  
    addTab();   
    });
});

17/05/2013, 13h17
SpaceFrog

http://www.developpez.net/forums/d13...crees-en-ajax/
17/05/2013, 15h01
flora806
Merci pour ta réponse ;)

j'ai utilisé la méthode delegate():
Code:

1 2 3 4 $(document).delegate("add_tab", "click", function() { .. }
au lieu de:
Code:

1 2 3 4 $("#add_tab").click(function(){ ... });
là le clic sur le boutton marche et la request est envoyée. Mais, le problème c que $("#add_tab_ajax").val() qui est dans l'url de l'appel ajax, récupère toujours les mêmes variables utilisées dans le 1er tab. l'url ne change pas du tout :calim2:

comment on peut résoudre ça?
17/05/2013, 15h07
SpaceFrog

ben tu delegate quoi comme fonction ???
la recuperation des données doit se faire relativement par rapport au bouton
17/05/2013, 17h02
flora806
en fait ce que je veux, c'est à chaque clic sur le boutton, ça déclenche un addTab(), mais selon la div où se retrouve le boutton, il va récupérer une url différente.
Code:

1 2 3 4 $(document).delegate("add_tab", "click", function() { addTab(); }
je sais pas si c assez clair..