Question

I’ve made a script, to get child genres from a “parent” genre from a MySQL database, using getJSON(). To show the list of child genres, I used show() function, but because the list hasn’t loaded yet, it will just pop up, and I don’t like that. How do I use the load() function (or any other that will help my case) to wait until the list is loaded and then use show()?

function getZvrsti(id){
        $.getJSON('test.php?parent='+id, function(data) {
            var tmpLi;
            $.each(data, function(id, name) {
                tmpLi = $('<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>');
                $(".drugeZvrsti").append(tmpLi);
                tmpLi = "";
            });
        });
    }

This is the function, which uses getJSON, and here is the snipped where I use show():

$(".naprejZvrst").click(function(){
            if(!on2){
                parent = $(this).attr("id");
                getZvrsti(parent);
                $(".drugeZvrsti").load(function(){ //my poor example of load()
                    druga.show(400);
                });
                on2 = true;

            }
            else if(on2){
                druga.hide(400);
                on2 = false;
                $(".drugeZvrsti").html(''); 
            }

        })

Class drugeZvrsti is the <ul> list, where list is shown, var druga is a <div>, where the whole <ul> list is.
NOTE: I’ve found example of load() function, but none explained how to use with a list, most were for images.

Answer 1

$.getJSON which is a shorthand for $.ajax is per default asynchronous which means that code execution will continue after you’ve called it.

What you want to do is to show the list in the callback once you’ve built and appended the list items.

// Let's define our local scope variables
var druga = $(".drugeZvrsti"),
    request = false;

function getZvrsti(id) {
    // Save the request to our requests object
    requests[id] = $.getJSON('test.php?parent='+id, function(data) {
        var html = "";
        $.each(data, function(id, name) {
            html += '<li><input type="checkbox" value="'+name['id']+'" id="zvrstId'+name['id']+'" /> <label for="zvrstId"'+name['id']+'">'+name['name']+'</label></li>';
        });
        // Append the list items and then fade in
        druga.append(html).show(400);
        // We no longer have a request going
        request = false;
    });
}

$(".naprejZvrst").click(function(){
    var id = $(this).attr("id");
    // Since we don't want multiple requests, abort any existing one
    if (request) {
        request.abort();
        request = false;
    }
    if (druga.is(":hidden")) {
        getZvrsti(id);
    } else {
        // Stop any animations, fade out and
        // use callback to empty the list when its hidden
        druga.stop().hide(400, function(){
            druga.empty();
        });
    }
});

You can also note some other changes I’ve done here, such as:

• Caching the selector for the list since it’s used multiple times
• Building the list as a plain string and append it once. This is because DOM manipulation is slow, so a good practice is to keep that down to a minimum.
• Saving the request to a variable so if there’s any ongoing request it can be aborted when the list is hidden
• Checking visibility of druga with .is instead of using the variable on2