Show spinner while Fetching data from server

[faisal6621]

I've this code for my AJAX script

$(document).ready(function() {

        $("#submit").click(function(){
            var acc = $("#accountNumber").val();

            src = "pass.php";
            $.ajax({
        url: src,
        data: 'action=account&type=viewDetail&accNo='+acc,
        cache: false,
        type:'GET',
        success: function(data, textStatus, XMLHttpRequest){


                    if(data!=0) {   
                       // alert(data);
                        $("#userInfo").html("");                        
            $("#userInfo").css("display","block");
            $("#userInfo").append(data);

                    }else {

            $("#userInfo").html('');                        
                        $("#userInfo").append('<span class="alert-red alert-icon">Please Enter correct Account Number.</span>');
                        $("#userInfo").css("display","block");
                    }

        },

        error:function(XMLHttpRequest, textStatus, errorThrown){alert(textStatus); alert(errorThrown);}
            });  
        });
    });

This scripts loads data from server and while I want to retrieve another account information it takes time. So I want to display some spinner while the data being fetched.

Anybody could help?

[gon1387]

Hi Faisal,
You can show the loading image right in the click event and use jquery's deferred method always() to hide the loading image. Here's a sample script:

$(document).ready(function() {
        $("#submit").click(function(){
            var acc = $("#accountNumber").val();
            src = "pass.php";
            //show your loading image
            $("#loading").show();
            $.ajax({
                url: src,
                data: 'action=account&type=viewDetail&accNo='+acc,
                cache: false,
                type:'GET',
                success: function(data, textStatus, XMLHttpRequest){
                    if(data!=0) {
                        $("#userInfo").html("");                        
                        $("#userInfo").css("display","block");
                        $("#userInfo").append(data);
                    }else {
                        $("#userInfo").html('');                        
                        $("#userInfo").append('<span class="alert-red alert-icon">Please Enter correct Account Number.</span>');
                        $("#userInfo").css("display","block");
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){alert(textStatus); alert(errorThrown);}
            //hide your loading image
            }).always(function(){
                $("#loading").hide();
            });  
        });
});

[ruchi18]

hi
You can use jquery loader

$('#element id').bind('click', function() {     
        $("<span><img src='loader image path' alt='Loading...' /></span>").insertAfter($(this));
        $(this).next().remove();
        $(this).unbind('click');
    });

you also find more details on
http://demos.mimiz.fr/jquery/loader

[Hoven_1]

you can use

xmlhttp.onloadstart(){
    document.getElementById().style.display="block";
};
xmlhttp.onloadend(){
    //you can make it delay with 3 second by settimeout() function
    document.getElementById().style.display="none";
};

This works pretty well