How to upload content to jQuery Accordion via AJAX

Question

I have a jquery accordion that loads a lot of data. This accordion is generated by querying the database. My question is: is there a way to not download content until a specific accordion element is selected? Basically, I would like to reproduce the functionality of loading jQuery ajax onto an accordion.

Answer 1

I am using jquery ui-1.11.4 and had the same problem. This is the solution I put together.

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 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

You can check this link on this site, I think it is very useful.

jQuery Accordion and content loading via AJAX

Answer 4

Can't you just bind a handler to the "change" event?