jQuery Load Data into Accordion

Question

Hello,

I recently asked a question (and had it answered) here: http://stackoverflow.com/questions/3364937/jquery-load-json

I have a follow-up question, I was hoping to receive some advice on. Basically, I am loading data into the following div: "#my_div", which is actually a child element of another div, "#accordion", which is an accordion (jQuery UI).

My code looks like this:

$("#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> \
                                              ');
                                    });
});
}

And the HTML:

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

However, the problem is: upon the page loading, and then the JSON elements, the accordion does not automatically resize to fit JSON-loaded elements. Only if I collapse the accordion, and then reopen, you can properly see the elements. (This happens in both FF and IE).

I have tried placing $("#accordion").accordion({collapsible: true, clearStyle: true }); at the end of the load_list() function, but am still getting the same result. Any help on this would be great.

Thanks very much!

UPDATE:

Per the suggestions below, I have tried a few different methods, but am still running into the same issue.

Here is the most recent code I have tried:

 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 });
                        }
 });
 }

I have also tried the other suggestions of autoHeight (which is true by default, no?), as well as the 'resize' method.

None of these appear to be working, unfortunately. If anyone else has any suggestions, they'd be greatly appreciated. Or perhaps, this is just something that cannot be accomplished in this particular situation.

Answer 1

You can move the accordion init to the success callback of the getJSON function, which will ensure the accordion runs with the elements already loaded.

Also you can use autoHeight to make sure the accordion is sized to fit all elements.

Cheers,

Marko

Answer 2

i never worked with accordion but after a glance at the api docs i figgured this might be what you are looking for: 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" );  
    });
});
}

try this snippet

Answer 3

try this..

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 });               

        });

}

Answer 4

Okay, I believe I figured it out. Although, I don't think this is the "proper" way to achieve.

I failed to mention previously that this accordion is actually within a "tab" using $.tabs() with jQuery.

I noticed that when I remove the "tab" function altogether, it works fine (almost all of the snippets above load the accordion perfectly when the tabs are removed).

As a result, I believe this has something to do with the accordion being inside of the tabs, and the way the elements are constructed upon page load.

As a hack/workaround, I added the following code, which works perfect for now:

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

I'm still unsure if there's a better way to achieve this, but, nonetheless, waiting 1 second to load the accordion works for now.

Thanks for all the suggestions.