Question

I want to add a loading image that will be visible between the start and end of an ajax request in jquery.

Currently, when the button I want to replace with a loading image is clicked, this function is called:

function test(num)
{
             $("div.bd_img").attr("style", "display:none");
             $("div.ajax_load").attr("style", "display:block");
             str = "ajax?id=" + num.toString();

             $.ajax({
                type: "GET",
                url: str,
                dataType: "xml",
                success: test2
             });
             $("div.bd_img").attr("style", "display:block");
             $("div.ajax_load").attr("style", "display:none");

}

But it doesnt seem to be working.

The two divisions bd_img and ajax_load are childs of a div, so one should be replaced by another when display is set to none and vice versa.

Answer 1

check your test2 method. I would also move your image switch into your success callback.

success: function() {
    $("div.bd_img").show();
    $("div.ajax_load").hide();

    test2();
}

check to make sure your div actually has the class bd_img and ajax_load and that class is not on the actual image. right now you are saying that your div has the class ‘.bd_img’ or ‘.ajax_load’. if it is an image inside the div with the class, then you want …

$("div .bd_img").show();
$("div .ajax_load").hide();