Display 'loading' image when AJAX call is in progress

Question

I have the following jQuery Ajax call:

$.ajax({
                   type: "POST",
                   url: "addtobasket.php",
                   data: "sid=<?= $sid ?>&itemid=" + itemid + "&boxsize=" + boxsize + "&ext=" + extraval,
                   success: function(msg){
                     $.post("preorderbasket.php", { sid: "<?= $sid ?>", type: "pre" },
                     function(data){
                        $('.preorder').empty();
                         $('.preorder').append(data); 
                     }); 
                   }
                 });

I want to display an image when the ajax call is in progress. How can I do that?

Thanks,

possible duplicate of Show loading image while $.ajax is performed — AXMIM
– AXMIM, Commented Jun 16, 2015 at 13:04

DonSeba · Accepted Answer · 2011-08-16 17:31:00Z

27

try this :

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#loading')
            .hide()
            .ajaxStart(function() {
                $(this).show();
            })
            .ajaxStop(function() {
                $(this).hide();
            });
    });
</script>

<div id="loading">
        Loading....
</div>

This will show the loading image each time you are doing an ajax request, I have implented this div at the top of my pages, so it does not obstruct with the page, but you can always see when an ajax call is going on.

answered Aug 16, 2011 at 17:31

DonSeba

2,1192 gold badges16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

a'r Over a year ago

Note this will show the loading div when any ajax requests are in progress.

Lobstrosity · Accepted Answer · 2011-08-16 17:30:37Z

7

Something along these lines (showLoadingImage and hideLoadingImage are up to you):

// show the loading image before calling ajax.
showLoadingImage();

$.ajax({
    // url, type, etc. go here
    success: function() {
        // handle success. this only fires if the call was successful.
    },
    error: function() {
        // handle error. this only fires if the call was unsuccessful.
    },
    complete: function() {
        // no matter the result, complete will fire, so it's a good place
        // to do the non-conditional stuff, like hiding a loading image.

        hideLoadingImage();
    }
});

answered Aug 16, 2011 at 17:30

Lobstrosity

3,93631 silver badges23 bronze badges

1 Comment

Doug Molineux Over a year ago

There's also a beforeSend parameter in the ajax object

jeremyasnyder · Accepted Answer · 2011-08-16 17:28:48Z

1

You can display the image just before this call to $.ajax() and then hide/remove the image in the post handler function (just before your .empty()/.append(data) calls.

answered Aug 16, 2011 at 17:28

jeremyasnyder

1,4091 gold badge9 silver badges8 bronze badges

Comments

Atif Tariq · Accepted Answer · 2022-12-30 17:57:03Z

It works. I have tested it.

<script type='text/javascript'>

$(document).ready(function(){

$("#but_search").click(function(){
var search = $('#search').val();

$.ajax({
 url: 'fetch_deta.php',
type: 'post',
data: {search:search},
beforeSend: function(){
 // Show image container
$("#loader").show();
},
success: function(response){
 $('.response').empty();
$('.response').append(response);
},
complete:function(data){
// Hide image container
$("#loader").hide();
}
});

});
});
</script>

<input type='text' id='search'>
<input type='button' id='but_search' value='Search'><br/>

<!-- Image loader -->
<div id='loader' style='display: none;'>
  <img src='reload.gif' width='32px' height='32px'>
</div>
<!-- Image loader -->

<div class='response'></div>

Collectives™ on Stack Overflow

Display 'loading' image when AJAX call is in progress

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related