CODEWITHSUNDEEP
javascriptjqueryjquery-ui
mawburn
mawburn

Reputation: 2335

Select a class under an active accordion panel

I am trying to load data into a table in the accordion panel once it's clicked. I've tried a number of different ways and tried to find it in the DOM object, but I just can't find how to access it directly. It's not complicated, but I've probably just overly confused myself to the point where I'm going in circles.

I have a basic accordion:

<div id="bb-content">
   <h3 data-category="cat1">Name1</h3>
   <div>
      <table class="bb-table">
         <tbody class="bb-content">
         </tbody>
      </table>
   </div>
   <h3 data-category="cat2">Name2</h3>
   <div>
      <table class="bb-table">
         <tbody class="bb-content-body">
         </tbody>
      </table>
   </div>
....
</div>

etc.

Built with this jQuery UI method

$('#bb-content').accordion({ 
   active: false,
   collapsible: true,
   heightStyle: "content",
   beforeActivate: function(event, ui) {
      var cat = ui.newHeader.data("category");
      var tbody = $(this).find('.bb-content-body');                     

      //if(!$.trim( tbody.html() ).length) {
         tbody.load("/ajax/bb", {'cat': cat});
      //}
   }
});

This is the most working version I have. I've tried a number of other things, but this works somewhat. And what I want to do is the commented out part, but it selects all the classes (like it should) instead of just the first one below the H3.

Basically, I want to query the ajax page only once per panel.

Using jQuery-UI 1.10.4

Upvotes: 0

Views: 164

Answers (1)

Shaunak D
Shaunak D

Reputation: 20626

Use

var tbody = ui.newHeader.next().find('.bb-content-body');

instead of

var tbody = $(this).find('.bb-content-body');

Reason : $(this) refers $('#bb-content'), while you need current accordion header use ui.newHeader

Upvotes: 1

Related Questions