Display image while running POST

Question

I have this code that I use to POST without reloading the page, but I wonder how I can add that in the script being executed display an image. example loader.gif

Thanks for your help.

<script language="javascript" src="jquery-1.6.4.min.js"></script>
<script language="javascript">
$(document).ready(function() {
    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');
    });
    $('#form, #fat, #form').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                $('#result').html(data);

            }
        })

        return false;
    }); 
})

possible duplicate of [Display loading image while post with ajax](http://stackoverflow.com/questions/2509711/display-loading-image-while-post-with-ajax) — js1568, Aug 27 '12 at 18:11

score 0 · Answer 1 · answered Aug 27 '12 at 18:08

Use JQuery to add the image to the page. Generally this is added close by the button the user clicks to start the AJAX request. This allows the user to see that something is happening in the background while your scripts run.

Alternatively, since your script is being run on document.ready, you could have the image from the get-go and then remove it once the ajax call completes.

score 0 · Accepted Answer · answered Aug 27 '12 at 18:08

0

Not sure if I understand, but it seems you're quite near to it

// #loading could be an img tag pointing to loader.gif or a div containing the img
$('#loading').ajaxStart(function() {
    $(this).show();
    $('#result').hide();
}).ajaxStop(function() {
    $(this).hide();
    $('#result').fadeIn('slow');
});

answered Aug 27 '12 at 18:08

Claudio Redi

67,454
15
130
155

many thanks, just what I needed. excuse my ignorance, but I'm starting in the programming with ajax. thanks – HeribertoVJ Aug 27 '12 at 18:23

score 0 · Answer 3 · answered Aug 27 '12 at 18:09

0

put the loader in a hidden div (display:none) you can then use

$('#div').show();

before the ajax request and then hide it again in the success callback:

$('#div').hide();

answered Aug 27 '12 at 18:09

SwiftD

5,769
6
43
67

score 0 · Answer 4 · answered Aug 27 '12 at 18:09

0

at the first line of submit function:

$('#loadingImg').show();

and at the first line of callback success function:

$('#loadingImg').hide();

answered Aug 27 '12 at 18:09

Dariush Jafari

5,223
7
42
71

Display image while running POST

4 Answers4