Question

my code

function get_projects() {
 $.ajax ({
   url: "get_projects.php",
   type: "post",
   dataType: "json",
   data: {value : $("#search_term").val()},
   success: function(store) {   
     var a = 0;
     var b = 0;

     $("#testdiv").empty();             
     var content = '';                                      
     $.each(store, function(i, data) {
       a = a + 1;
       content += '<div id="tabs'+[i]+'">';
       content += '<ul>';       
       content += //.... a bunch of tab headings    
       content += '</ul>';
       content += '<div id="ui-tabs-'+(a+b)+'">';
       // ... some tab content 

       content += '</div>';
       content += '<div id="ui-tabs-'+(a+1+b)+'">';
       // ... some tab content for each tab up to 

       content += '<div id="ui-tabs-'+(a+5+b)+'">';
       // ... some tab content 
       content += '</div>'; 
       content += '</div>';
       b = b + 5;       
       });

     $("#testdiv").append(content);

     $("#tabs0").tabs(); 
     $("#tabs1").tabs(); 
     $("#tabs2").tabs(); 
     .... same thing for a bunch of other possible tabs up to #tabs20 

short explanation

a search_term can result in multiple projects and each project has 6 tabs. so each time a search term is submitted the page redraws with the new projects and their tabs of information

the problem

the first time the html is injected into the page everything is fine.

the generated div id’s ui-tabs-# match the div id’s I have created with (a+...+b) counter.

however on each subsequent request the auto generated div id numbers are accumulating, not starting again from zero. so my (a+...+b) counter is producing div id’s that don’t match. consequently the tab content sits outside the tab containers

I have tried .tabs("destroy") and .tabs("remove") for both the $("#testdiv") and individual $("#tabs0") in and outside of the $.each() loop

I can’t seem to work it out

any help and suggestions would be great

Answer 1

solved it by moving the variables a and b outside the ajax function so they don’t reset to 0 each loop

 var a = 0;
 var b = 0;

function get_projects() {
 $.ajax ({
    url: "get_projects.php",
    type: "post",
    dataType: "json",
    data: {value : $("#search_term").val()},
    success: function(store) {   

 $("#testdiv").empty();             
 var content = '';                                      
 $.each(store, function(i, data) {
   a = a + 1;
   content += '<div id="tabs'+[i]+'">';
   content += '<ul>';       
   content += //.... a bunch of tab headings    
   content += '</ul>';
   content += '<div id="ui-tabs-'+(a+b)+'">';
   // ... some tab content 

   content += '</div>';
   content += '<div id="ui-tabs-'+(a+1+b)+'">';
   // ... some tab content for each tab up to 

   content += '<div id="ui-tabs-'+(a+5+b)+'">';
   // ... some tab content 
   content += '</div>'; 
   content += '</div>';
   b = b + 5;       
   });

 $("#testdiv").append(content);

 $("#tabs0").tabs(); 
 $("#tabs1").tabs(); 
 $("#tabs2").tabs(); 
 .... same thing for a bunch of other possible tabs up to #tabs20