如何通過AJAX加載JQuery Accordion中的內容

Question

我有一個加載大量數據的jquery手風琴。這個手風琴是通過查詢數據庫生成的。我的問題 - 是否有方法在手風琴的特定元素被點擊之前不加載內容？基本上，我想複製jquery tab ajax內容加載到手風琴的功能。

Answer 1

我使用jQuery UI的-1.11.4和有同樣的問題。這是我拼湊在一起的解決方案。

的JavaScript：

var already_loaded = new Object(); // used to track which accordions have already been loaded 

$(function() { 
    $("#accordion").accordion({ 
     collapsible: true, 
     active: false, 
     //heightStyle: 'fill', // http://jqueryui.com/accordion/#fillspace -- Just sets the height of the accordion to the height of it's parent container. We need a way to change the height of the parent to that of the newly added content. 
     activate: function (e, ui) { 
      // only fire when the accordion is opening.. 
      if(ui.newHeader.length>0){     
       // only retrieve the remote content once.. 
       if(! already_loaded[ui.newHeader[0].id]==1){ 
        var srcObj = $(ui.newHeader[0]).children('a'); 
        var url = srcObj.attr('href'); 
        var folder = srcObj.attr('data-folder'); 
        //$.get(url, function (data){ // if you wanted to use the GET method uncomment this and comment the next line. Be sure to add any needed query string parameters to the URL. 
        $.post(url, {doCmd:'getFolderFiles', folder:srcObj.attr('data-folder')}, function (data){ 
         $(ui.newHeader[0]).next().html(data); 
         var contentDiv = $(ui.newHeader[0]).next()[0]; 
         $('#'+contentDiv.id).height(contentDiv.scrollHeight); 
         //$("#accordion").accordion("refresh"); // http://api.jqueryui.com/accordion/#method-refresh -- The documentation isn't clear on this but this only refreshes added/removed panels. Does not refresh existing panels with newly added content. 
         already_loaded[ui.newHeader[0].id]=1; // keep track of the loaded accordions 
        }); 
       } 
      } 
     } 

    }); 

}); 

的HTML：

<div id="accordion"> 
     <h3><a href="program_to_generate_accordion_content.php" data-folder="2015">2015 Files</a></h3> 
     <div> 
      <p> 
       Loading... Please wait. 
      </p> 

     </div> 

     <h3><a href="program_to_generate_accordion_content.php" data-folder="2016">2016 Files</a></h3> 
     <div> 
      <p> 
       Loading... Please wait. 
      </p> 
     </div> 
</div> 

Answer 2

難道你不能只綁定一個處理程序的「改變」事件？

Answer 3

檢查出this question和this blog entry，它可能會指出你在正確的方向。

Answer 4

你可以查看這個網站的鏈接，我覺得它非常有幫助。

jQuery Accordion and loading content through AJAX