How to get the clicked element in a dynamically built JQuery Treeview?

Posted by Alexander on Stack Overflow See other posts from Stack Overflow or by Alexander
Published on 2010-04-09T12:14:47Z Indexed on 2010/04/09 12:33 UTC
Read the original article Hit count: 482

I have a product database with several product categories. Each category has a number of sub-categories, which has sub-sub-categories, which has... Well, quite some levels deep. The tree is too huge to load at once, so I need to built it dynamically as users select specific product categories. Here's a snapshot of the product tree. Initially, only the first level is loaded. The second level (Cat. 1.1 and cat. 1.2) is added when the user clicks on cat. 1:

<ul id="navigation">
   <li id="625212">Product cat. 1
      <ul>
         <li id="625213">Product cat. 1.1
            <ul></ul>
         </li>
         <li id="625109">Product cat. 1.2
            <ul></ul>
         </li>
      </ul>
   </li>
   <li id="624990">Product cat. 2
      <ul></ul>
   </li>
</ul>

I intend to extend the tree as users click on specific product categories. I can get the list of sub-categories from a URL that takes the parent product category ID as input and outputs HTML in the format needed by treeview. I cannot use PHP and have to make this work with the .click() event. Here's the code that I have:

$(document).ready(function(){

   function doSomethingWithData(htmldata, id) {
      var branches = $(htmldata).appendTo("#navigation #"+id+" ul");
      $("#navigation").treeview({ add: branches });
   } 

   $("#navigation").treeview({
      collapsed: true,
      unique: true,
      persist: "location"
   });

   $("#navigation li[id]").click(function() {
      var id=$(this).attr("id");
      if ($("#"+$(this).attr("id")+" ul li").size()==0) {
         $.get('someurl?id='+$(this).attr("id"), 
            function(data) { doSomethingWithData(data, id); } )
      }
   }); 

});

The problem I'm having is with the click-event. When clicking on cat 1.1. to extend it one level deeper, it still returns the ID of the top level product category.

How can I change the click events so that it will return the ID of the clicked <LI> instead of the top one?

If the product category does not have any sub-categories, how can I remove the <UL></UL> and thus inidcating that the tree cannot be expanded any further?

© Stack Overflow or respective owner

Related posts about dynamic

Related posts about jQuery