CODEWITHSUNDEEP
jqueryajaxloading
Daniel
Daniel

Reputation: 433

Loading image which waiting for AJAX request

I have the following script which requests data through AJAX:

 $(document).ready(function(){
        $('#input').keyup(function(){
            sendValue($(this).val());     
        }); 

    });
    function sendValue(str){
        $.post("ajax.php",{ sendValue: str },
        function(data){
            $('#display').html(data.returnValue);
        }, "json");

    }

I just want to show a DIV while the request is being made, and hide it when the data comes back. I've tried this:

$("#loading").ajaxStart(function(){
   $(this).show();
})
.ajaxStop(function(){
   $(this).hide();
});

But it didn't show or hide, it was always displayed.

Upvotes: 1

Views: 268

Answers (1)

user1823761
user1823761

Reputation:

Working jsFiddle Demo

As of jQuery 1.8, the .ajaxStart() method should only be attached to document. So:

$(document).ajaxStart(function(){
    $("#loading").show();
})
.ajaxStop(function(){
    $("#loading").hide();
});

References:

Upvotes: 3

Related Questions