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?
