show a message as ajax submits a form

Question

Am submitting a form using this code

$.ajax({
    type:'GET', 
    data:fields,
    url:'new/addcomm.php',
    success:function(feedback){
        reload();
        // alert (feedback);
    }
});

Now. How do I show the please wait gif while the ajax is submitting the form assuming I want it showing in

<div id="working"></div>

Thanks

Answer 1

<div id="working"><img src="loader.gif" style="display:none;"/></div>


$.ajax({
    type:'GET', 
    data:fields,
    url:'new/addcomm.php',
    beforeSend: function(){
       $('#working img').show();  
    }, 
    complete:function(){
       $('#working img').hide();     
    },
    success:function(feedback){
        reload();
        // alert (feedback);
    }
});

Answer 2

To use beforeSend and complete settings of ajax. Documentation

Try this:

$.ajax({
    type:'GET', 
    data:fields,
    url:'new/addcomm.php',
    beforeSend: function() {
        $('#working').show();
    },
    complete: function() {
        $('#working').hide();
    },
    success:function(feedback){
        reload();
        // alert (feedback);
    }
});

Answer 3

You can use ajaxStart and ajaxStop like this

//show image when clicks on submit button
$('form').ajaxStart(function() {
  $('#working').show();
});

//hide image when ajax request stop
$('form').ajaxStop(function() {
  $('#working').hide();
});

Hope this helps!

Answer 4

Here is how

HTML

<div id="working"><img src="loader.gif"/></div>

CSS

#working { display: none; }

JS:

var $loader = $('#working');
$loader.show();
$.ajax({
    type:'GET', 
    data:fields,
    url:'new/addcomm.php',
    success:function(feedback){
        reload();
        $loader.hide(); //or .fadeOut();
    }
});

OR try beforeSend

var $loader = $('#working');
$.ajax({
    type:'GET', 
    data:fields,
    url:'new/addcomm.php',
    beforeSend: function(){
       $loader.show();
    },
    success:function(feedback){
        reload();
        $loader.hide(); //or .fadeOut();
    }
});