Question

I’m sure this is easy, but I’m beating my head up against a wall.

I am basically creating a dynamically generated browse tree using jQuery, JSON and PHP (based on this approach: http://www.electrictoolbox.com/json-data-jquery-php-mysql/). I have changed the dropdown boxes into ul li menus. On the ‘a’ click event, I query the database and return the values of the next set of data. This is all working. I’m just having trouble getting the newly returned list to “nest” under the li that was clicked. For example:

<ul id='levelone'>
 <li><a id='cats' href='#'>Cats</a></li>
 <li><a id='dogs' href='#'>Dogs</a></li>
 <li><a id='fish' href='#'>Fish</a></li>
</ul>

If the user clicks on ‘dogs’ my PHP/JSON event queries the database and returns the list:

<ul id='leveltwo'>
 <li><a id='hounds' href='#'>Hounds</a></li>
 <li><a id='shepherds' href='#'>Shepherds</a></li>
 <li><a id='poodles' href='#'>Poodles</a></li>
</ul>

This works, but I want the list to display as a nested list under ‘Dogs’ on the page. Like this:

<ul id='levelone'>
 <li><a id='cats' href='#'>Cats</a></li>
 <li><a id='dogs' href='#'>Dogs</a></li>
     <ul id='leveltwo'>
      <li><a id='hounds' href='#'>Hounds</a></li>
      <li><a id='shepherds' href='#'>Shepherds</a></li>
      <li><a id='poodles' href='#'>Poodles</a></li>
    </ul>
 <li><a id='fish' href='#'>Fish</a></li>
</ul>

I’ve tried a variety of approaches, but none are working. I’m sure there is an easy button I’m missing…Any assistance would be appreciated.

The jQuery to generate the leveltwo list is below:

    function populateAmimalSubcategory() {
    $.getJSON('./includes/browsedata/animalsubcat.php', { animalcategory:       
       $('#ucHidden').val() }, function (data) {
        $("#animalsubcat").append("<ul id='subcatlist'></ul>");
        $.each(data, function (val, text) {
        $("#subcatlist").append("<li><a href='#' id='" + this.use_subcategory + "'>" + this.use_subcategory + "</a></li>");
        });
    });

This calls the function when an item in the level one div is clicked:

    $('#animallist a').live('click', function(){
        document.getElementById('ucHidden').value = this.id;
        $('#animalsubcat').empty();
        populateAnimalSubcategory();
    });

KMT

Answer 1

$('body').on('click', "#animallist > li > a", function(){
    var myli = $(this).parent();
    $('.animalsubcat', myli).remove();
    populateAnimalSubcategory(myli);
});

function populateAmimalSubcategory(myli) {
    $.getJSON('./includes/browsedata/animalsubcat.php', {
        animalcategory: $('#ucHidden').val()
    }, function (data) {
        $(myli).append("<ul class='animalsubcat'></ul>");
        $.each(data, function (val, text) {
            $(".animalsubcat", myli).append("<li><a href='#' id='" + this.use_subcategory + "'>" + this.use_subcategory + "</a></li>");
        });
    });
}