how do I add multiple events to a collapsible list?

I'm working on a modification for the backend of a shopping cart. I need to list the product categories in a collapsible nested list. I've been able to do that with the code from Jochen:

$(function() {
  $('li > ul').each(function(i) {
    var parent_li = $(this).parent('li');
    parent_li.addClass('folder');
    var sub_ul = $(this).detach();
    parent_li.find('a').click(function() {
      sub_ul.toggle();
    });
    parent_li.append(sub_ul);
  });
  $开发者_C百科('ul ul').hide();
});

But I also need to be able to display all the products in a given category when that category is clicked. I want the event to cause the page to do the mysql call at that point and then list the products in a div to the right of the collapsible tree.

I'm self taught, and while I've gotten pretty good at php, it has been years since I did anything extensive in plain old javascript, and I'm afraid I'm in over my head with ajax and jQuery. Any help would be greatly appreciated.

I tried to implement the much appreciated solution posed by vinceh, but in spite of several days of research, I have been unable to figure out how to use the .data object to pass the category through to the url.

Anyone have any ideas on how to pass the data I need?

Thanks in advance.

---

I would add a click event to your category items and send an AJAX request which will retrieve the necessary items from the db and have it sent back to the page to be rendered. You can do a binding by:

$(".someClass").click( function() {
    $.ajax({
        url: "url/to/your/function",
        type: "GET",
        dataType: "script"
    });
});

But the thing is, you need to pass the category item through the url, you can do this by adding .data to your object via JQuery.

Once the server returns with the information, you will render some stuff, and it depends on how your framework does it, you have different solutions, but it's just a simple rendering action, like .append all your items to the div that you want.

You can add a lot of options to your AJAX request to make it do exactly what you want, please refer to this for more detail. Good luck!