jQuery的數據加載到手風琴

最近，我問了一個問題（並有它回答）位置：jQuery Load JSON jQuery的數據加載到手風琴

我有一個跟進的問題，我希望能得到一些建議。基本上，我正在將數據加載到以下div："#my_div"，它實際上是另一個div的子元素，"#accordion"，這是一個手風琴（jQuery UI）。

我的代碼如下所示：

$("#accordion").accordion({collapsible: true, clearStyle: true }); 

function load_list() { 
$.getJSON('json/load.php', function(data) { 
     $("#my_div").empty(); 
     $.each(data, function(k, v){         
     $("#my_div").append(' 
            <li> \ 
             <div> \ 
             <input type="checkbox"> \ 
             </div> \ 
             <div>'+v.due_date+'</div> \ 
             <h3> \ 
             <span>'+v.title+'</span> \ 
             </h3> \ 
             </li> \ 
               '); 
            }); 
}); 
}

和HTML：

<div id="accordion"> 
    <div id="my_div">JSON elements loaded here.</div> 
</div>

然而，問題是：在頁面加載，然後JSON元素，手風琴未自動調整大小以適應JSON加載的元素。只有當我摺疊手風琴，然後重新打開時，才能正確看到這些元素。（這發生在FF和IE中）。

我試過把$("#accordion").accordion({collapsible: true, clearStyle: true });放在load_list()函數的末尾，但我仍然得到相同的結果。任何對此的幫助都會很大。

非常感謝！

UPDATE：

每下面的建議，我已經嘗試了一些不同的方法，但我仍然在運行到同樣的問題。

這裏是最近的代碼，我曾嘗試：

function load_tasks() { 

      $.ajax({ 
        url: 'json/load.php', 
        dataType: 'json', 
        success: function(data) { 
         $.each(data, function(k, v){ 
           $(("#my_div").append(' 
           <li> \ 
            <div> \ 
            <input type="checkbox"> \ 
            </div> \ 
            <div>'+v.due_date+'</div> \ 
            <h3> \ 
            <span>'+v.title+'</span> \ 
            </h3> \ 
            </li> \ 
              '); 
           });           
        $("#accordion").accordion({collapsible: true, clearStyle: true, autoHeight: true }); 
         } 
}); 
}

我也曾嘗試autoHeight的其他建議（默認情況下是真實的，不是嗎？），以及「調整大小」的方法。

這些都不似乎工作，很遺憾。如果任何人有任何建議，他們將不勝感激。或者，也許，這只是在這種特殊情況下無法完成的事情。

來源

2010-07-29 Dodinas

好的，我相信我明白了。雖然，我不認爲這是實現「正確」的方式。

我之前沒有提到這個手風琴實際上是在一個使用$ .tabs（）和jQuery的「tab」中。

我注意到，當我完全刪除「標籤」功能時，它可以正常工作（幾乎所有的片段都會在標籤被移除時完美地加載手風琴）。

因此，我相信這與手風琴在選項卡內部以及在頁面加載時構造元素的方式有關。

一劈/解決方法，我添加以下代碼，這對於現在的作品完美：

setTimeout('$("#accordion").accordion({collapsible: true, clearStyle: true, autoHeight: true })', 1000);`

我還在，如果有更好的方式來實現這一目標不確定，但儘管如此，方法等待1秒現在加載手風琴作品。

感謝您的所有建議。

來源

2010-07-30 14:50:02 Dodinas

可以手風琴初始化移動到的getJSON功能的成功回調，這將確保與已加載的元素手風琴運行。你

也可以使用autoHeight以確保手風琴的尺寸適合所有元素。

乾杯，

馬爾科

來源

2010-07-29 19:37:43 Marko

感謝您的建議，但是，Marko看起來並不像回調工作。我不知道爲什麼。看到我上面的更新。 – Dodinas 2010-07-30 00:40:08

回調正在爲我工作，但調整大小（）不起作用。我也嘗試刷新（）沒有成功。 – tintyethan 2013-11-14 20:24:36

我終於得到這個與$（「。選擇器」）。手風琴（「刷新」） – tintyethan 2013-11-15 14:01:33

我從來沒有與手風琴的工作，但在API文檔一眼後，我figgured這可能是你正在尋找： http://docs.jquery.com/UI/Accordion#method-resize

$("#accordion").accordion({collapsible: true, clearStyle: true }); 

function load_list() { 
$.getJSON('json/load.php', function(data) { 
     $("#my_div").empty(); 
     $.each(data, function(k, v){         
     $("#my_div").append(' 
            <li> \ 
             <div> \ 
             <input type="checkbox"> \ 
             </div> \ 
             <div>'+v.due_date+'</div> \ 
             <h3> \ 
             <span>'+v.title+'</span> \ 
             </h3> \ 
             </li> \ 
               '); 
    $("#accordion").accordion("resize"); 
    }); 
}); 
}

試試這個snippet

來源

2010-07-29 19:44:15

試試這個..

function load_tasks() { 
     var data = ""; 
     $.ajax({ 
       url: 'json/load.php', 
       dataType: 'json', 
       success: function(msg) { 
        data = msg; 
       }, 
       complete: function() { 
        $.each(data, function(k, v){ 
          $(("#my_div").append(' 
          <li> \ 
           <div> \ 
           <input type="checkbox"> \ 
           </div> \ 
           <div>'+v.due_date+'</div> \ 
           <h3> \ 
           <span>'+v.title+'</span> \ 
           </h3> \ 
           </li> \ 
             '); 
          });           
       $("#accordion").accordion({collapsible: true, clearStyle: true, autoHeight: true });    

     });

}

來源

2010-07-30 05:58:36 Manie

  $('#accordion').accordion({ 
       collapsible: true, 
       active: false, 
       beforeActivate:function(event, ui) { 
        href = ui.newHeader.attr('id'); 
        $.get(href, function(data) { 
         ui.newHeader.next("div").html(data); 
        }); 

       }, 
       heightStyle: "content" 
      });

來源

2013-06-27 17:59:10

jQuery的數據加載到手風琴

回答

相關問題