Question

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?

Answer 1

To only return one LI, I think you are gonna have to use the code below. This will match only the child of the UL, which is the LI you click on.

$('#navigation ul > li').click(function() {
      alert($(this).attr('id'));
});

For removing the UL’s, can you just check if anything gets returned in the $.get? So I guess your click function would look something like this:

UPDATE – This will select even the top li:

$('#navigation').click(function(e) {

     var element = $(e.target);
     if (element.context.nodeName === 'LI')
     {
       var id = element.attr('id');
       if ($('#' + id + ' ul li').size()==0) 
       {
           $.get('someurl?id='+ id, 
              function(data) 
              { 
                // data could = undefined or something else, just check what 
                // it looks like when it comes through empty and match that
                if (data != null) 
                {
                  doSomethingWithData(data, id);
                }       
                else
                {
                  $('#' + id).children('ul').remove();
                }
              }
           );
        }
     }

   });