How to load image spinner while getting data in Ajax

[tiekwebstar]

I got a great response from this site. now my final thing is show gif loading image while getting data in Ajax..

my code is :

function vote(id)
{ 

    var result = new Array();
    document.getElementById('sub-cat').innerHTML = ajax_image; 
     result = $.ajax({
                       type: "POST",
                       url: "ajax.php",
                       data: "id="+id,
                       async: false
               }).responseText.split("^");
document.getElementById('sub-cat').innerHTML = result[0];
document.getElementById('sub-cat1').innerHTML = result[1];


//window.location.reload()
}

i have tried below code but no work... :(

function vote(id)
{ 
    var ajax_image = "<img src='_assets/images/tire-loader.gif' alt='Loading...' />";

    var result = new Array();
     //$('#sub-cat').html(ajax_image);
    document.getElementById('sub-cat').innerHTML = ajax_image; 
     result = $.ajax({
                       type: "POST",
                       url: "ajax.php",
                       data: "id="+id,
                       async: false
               }).responseText.split("^");
document.getElementById('sub-cat').innerHTML = result[0];
document.getElementById('sub-cat1').innerHTML = result[1];


//window.location.reload()

`

}

`
Really appreciate your hard work

[JorgeM]

You can use the Ajax-loader image's CSS display properly to achieve this.

First, you have the image's display set to none. Then, when you execute the function, set the display to block. The line before your assign the Ajax results to sub-cat, set the display back to none.

There is no need to assign the Ajax-loader to the innerHTML of sub-cat. Just style the image with an absolute position and place it where you need it on the screen.

[AleMonteiro]

Try this, and make sure that the image path does exists.

function vote(id)
{ 
    var ajax_image = "<img src='_assets/images/tire-loader.gif' alt='Loading...' />";

     $('#sub-cat').html(ajax_image);

     $.ajax({
        type: "POST",
        url: "ajax.php",
        data: "id="+id,
        async: true,
        success: function(result) {
            result = result.responseText.split("^");
            $('#sub-cat').html(result[0]);
            $('#sub-cat').html(result[1]);     
        }
     });
}

[scrager]

You're likely not seeing the loading image because you are doing a syncronous call. The browser is basically frozen while the javascript executes, and since the call is synchronous, control is not given back to the browser to redraw your loading image.