jquery - 如何通过 AJAX 在 JQuery Accordion 中加载内容

Question

我有一个加载大量数据的 jquery Accordion 。该 Accordion 是通过查询数据库生成的。我的问题 - 有没有办法在单击 Accordion 的特定元素之前不加载内容？基本上，我想将 jquery tab ajax 内容加载的功能复制到 Accordion 。

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>