How can I set loading image during post data processing for jquery ajax?

Question

The jquery ajax code is:

$("#id_btnpolls").click(function(){ 
    var valCheckedRadio = $('input[name=data[distributions]]:checked').val();
    //alert(valCheckedRadio);       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,       
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
        }           
    });

})

When I click the button, the data is displayed after 5 seconds or so. During that loding period I want to add a loading image. How can I do this?

HandiworkNYC.com · Accepted Answer · 2012-01-16 02:23:07Z

4

Here's the CSS + HTML I use for my loading image. I use jQuery to simply add a class that changes the opacity from 1 to 0, in combination with a CSS transition property for a fade effect. The background image for #loader is 220px X 80px and is just a solid color rounded rectangle with the text "loading" on the right hand side. The actual "ajax" spinner img is 60px tall, so that relative positioning and negative margin are there to center the img vertically.

   #loader {
        width: 220px;
        height: 80px;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: -1;
        opacity: 0;
        background: url(assets/images/bg-loader.png) no-repeat center center;
        transition: all .5s ease-in-out;
        margin: -40px 0 0 -110px;
    }

    #loader img {position: relative; top: 50%; margin-top: -30px; left: 10px;}

    .loading #loader {z-index: 1000; opacity: 1.0}

And the HTML (i got the loader.gif from here http://www.preloaders.net ):

    <div id="loader"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/loader.gif" /></div>

And then your jQuery:

$("#id_btnpolls").click(function(){ 
    var $body = $('body'),
         valCheckedRadio = $('input[name=data[distributions]]:checked').val();

    $body.addClass('loading');       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,       
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
            $body.removeClass('loading');
        }           
    });

})

answered Jan 16, 2012 at 2:23

HandiworkNYC.com

11.1k25 gold badges95 silver badges157 bronze badges

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

1 Comment

HandiworkNYC.com Over a year ago

it's the body element. It's easy to select the loading states of other elements by having the loading class on the body. That way any elements you want to hide during loading time can be selected by ".loading .element"

hvgotcodes · Accepted Answer · 2012-01-16 02:39:42Z

3

1) Have a holding div for the image, that is normally not visible.

You can do this via css, by adding visibility:hidden; (vs visibility: visible;), or optionally with display: none;

2) In your click handler, make that holding div visible.
3) In the done callback, make it invisible again.

Directly from the docs,

var request = $.ajax({
  url: "script.php",
  type: "POST",
  data: {id : menuId},
  dataType: "html"
});

request.done(function(msg) {
  $("#log").html( msg );
  // hide your loading image div here
});

edited Jan 16, 2012 at 2:39

answered Jan 16, 2012 at 2:10

hvgotcodes

121k33 gold badges209 silver badges237 bronze badges

2 Comments

cola Over a year ago

I can't understand your answer, posting complete example code will be helpful. what is data: {id : menuId} and dataType: "html" and where is the image there?

hvgotcodes Over a year ago

@guru, that is an example from the documentation. It's just an example ajax request. look at the done method where I put the comment in.

jermel · Accepted Answer · 2012-01-16 02:14:34Z

2

Have a look at the blockUI plugin for jquery

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

answered Jan 16, 2012 at 2:14

jermel

2,32621 silver badges19 bronze badges

Comments

Arvind Bhardwaj · Accepted Answer · 2012-01-20 04:20:46Z

2

The HTML and CSS code specified by j-man86 is good. For jQuery you can use the beforeSend function in the AJAX call. beforeSend is called before an AJAX request is sent. To hide the loading image use complete function of jQuery AJAX which is called after an AJAX request has been completed. So the code will look like:

$("#id_btnpolls").click(function(){ 
    var $body = $('body'),
         valCheckedRadio = $('input[name=data[distributions]]:checked').val();

    $body.addClass('loading');       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,
        beforeSend: function(){
            $body.addClass('loading');
        },
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
        },
        complete: function(){
            $body.removeClass('loading');
        }           
    });

})

edited Jan 20, 2012 at 4:20

answered Jan 16, 2012 at 5:40

Arvind Bhardwaj

5,3215 gold badges38 silver badges50 bronze badges

3 Comments

Arvind Bhardwaj Over a year ago

var $body = $('body'); Good catch guru:)

Mark Schultheiss Over a year ago

You do not need to have the removeClass in the success: as the complete: will be called after that - and even if it errors. +1 for doing it this way (beforeSend/complete) however. You COULD also do a global jQuery ajax as well using ajaxSend/ajaxComplete.

Arvind Bhardwaj Over a year ago

You are right Mark Schultheiss. I have removed the removeClass() from success function. Declaring global AJAX configurations are also a good idea.

Collectives™ on Stack Overflow

How can I set loading image during post data processing for jquery ajax?

4 Answers 4

1 Comment

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related