0

私のコード

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

簡単な説明

asearch_termは複数projectsになる可能性があり、各プロジェクトには 6 つのタブがあります。そのため、検索用語が送信されるたびに、新しいプロジェクトとその情報のタブでページが再描画されます

問題

HTMLがページに初めて挿入されたときは、すべて問題ありません。

生成された div id は、カウンターui-tabs-#で作成した div id と一致します。(a+...+b)

ただし、後続の各リクエストでは、自動生成された div id 番号が累積され、ゼロから再び開始されることはありません。私の(a+...+b)カウンターは一致しないdiv idを生成しています。その結果、タブのコンテンツはタブ コンテナーの外側に配置されます。

私は、ループの内外で and.tabs("destroy")と個人.tabs("remove")の両方を試しました$("#testdiv")$("#tabs0")$.each()

私はそれを解決することができないようです

どんな助けや提案も素晴らしいでしょう

4

1 に答える 1

0

a変数をajax 関数の外側に移動して解決し、bループごとに 0 にリセットされないようにしました

 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
于 2012-08-04T01:39:48.783 に答える