Start New Discussion within our Web Development Community

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?

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();
            });  
        });
});

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

This article has been dead for over six months. Start a new discussion instead.