1,105,271 Community Members

Show spinner while Fetching data from server

Member Avatar
faisal6621
Newbie Poster
9 posts since Sep 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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?

Member Avatar
gon1387
Posting Whiz in Training
242 posts since Jan 2011
Reputation Points: 22 [?]
Q&As Helped to Solve: 38 [?]
Skill Endorsements: 4 [?]
 
1
 

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();
            });  
        });
});
Member Avatar
ruchi18
Light Poster
46 posts since Jan 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: