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.
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 php : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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();   
    });
});