show loader when ajax is working

Question

I want to show a full-screen loader when my AJAX request is working. How can I do that?

$("#send").click(function() {
    if ($("#ccval").val() == $("#contactcaptcha").text()) {
        var id = $("#contactcaptcha").attr("data-id");
        var cemail = $("#cemail").val();

        $.post(base_url + "index.php/myad/getphonenumber", {
            uniqueid: id,
            emailaddress: cemail
        }, function() {
            alert('email is sent');
        })
    } else {
        $("#ccval").val("");
        $("#ccval").attr("placeholder", "invalid captcha");
    }
})
});

Create an element that's styled up as a loading icon, show it before the post, and remove it once you receive a response using `.always();` — DBS, Nov 11 '16 at 17:31

Kev · Answer 1 · 2016-11-11T17:42:42.527

$(function () {
    $(document).ajaxStart(function () {
        $("#Loader").show();
    });

    $(document).ajaxStop(function () {
        $("#Loader").hide();       
    });

    $(document).ajaxError(function () {
        $("#Loader").hide();       
    }); 
});

The other answers require you to duplicate the show/hide code for each ajax call. This is fine if you only have 1 call, but I assume you have several calls in your app.

My code above will show your loader during all ajax requests. I suggest adding it to your layout page, or putting it in a common js file.

#Loader is up to you. In my site, I style it as a fixed position element with a centered progress bar. Here is some basic styling you can use as a starting point.

#Loader {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    background-color: #fff;
    opacity: 0.6;
    z-index: 99999;
}

I'm using the short version of document ready above. See https://stackoverflow.com/questions/6004129/document-ready-shorthand. You could also write it as an IIFE - see https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript — Kev, Nov 14 '16 at 12:51

score 2 · Answer 2 · answered Nov 11 '16 at 17:33

Have a div#ajax-loader somewhere in your document and set it's styles:

/* You can style this further - this is just an example */
#ajax-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding-top: 35%;
    display: none;
}

And place it in your document as:

<div id="ajax-loader">Loading content...</div>

Now, change your jQuery code into:

$("#send").click(function() {
    if ($("#ccval").val() == $("#contactcaptcha").text()) {
        var id = $("#contactcaptcha").attr("data-id");
        var cemail = $("#cemail").val();

        // notice this line
        $('#ajax-loader').show();
        // this will set display: none; -> display: block; for this element

        $.post(base_url + "index.php/myad/getphonenumber", {
            uniqueid: id,
            emailaddress: cemail
        }, function() {
            alert('email is sent');

            // notice this line too
            $('#ajax-loader').hide();
            // just toggle the view vice-versa...
        })
    } else {
        $("#ccval").val("");
        $("#ccval").attr("placeholder", "invalid captcha");
    }
});

EDIT: Also, an answer below posted by Kev is highly suggested.

I added following code but it not displaying can you visit my website sale.coupsoft.com — Shah Rushabh, Nov 11 '16 at 17:46

score 0 · Answer 3 · answered Nov 11 '16 at 17:32

Well, first you need to make whatever image overlay you want. That's just CSS/HTML and up to your presentation. But here's one way to do it:

$(trigger).on('whatever', function(){ 
...
   $(loading_selector).show()
   $.ajax({ ..., 
            success:function(data) { 
               $(loading_selector).hide();
                  }
            });
 });

The problem here is, the loading selector will not hide if your ajax fails, so you'll need to add in some code to catch ajax errors and hide the loading pane in that logic block as well.

score 0 · Answer 4 · answered Nov 11 '16 at 17:32

Use the show loading indicator before you call Ajax and hide it afte the success or error case or you can use the complete handler of jQuery ajax

    $("#send").click(function() {
   if ($("#ccval").val() == $("#contactcaptcha").text()) {
    var id = $("#contactcaptcha").attr("data-id");
    var cemail = $("#cemail").val();
    //Start showing loading indicator
    showLoadingIndicator();
    $.post(base_url + "index.php/myad/getphonenumber", {
        uniqueid: id,
        emailaddress: cemail
    }, function() {
        hideLoadingIndicator();
        alert('email is sent');
    })
} else {
    hideLoadingIndicator();
    $("#ccval").val("");
    $("#ccval").attr("placeholder", "invalid captcha");
}})});

@ShahRushabh i hope you will add the logic to showLoadingIndicator and hideLoadingIndicator which will show the div with zindex like 1000 and width and height as 100% — Devesh, Nov 11 '16 at 17:40
I could not understand which will show the div with zindex like 1000 and width and height as 100% can you please add it in code. — Shah Rushabh, Nov 11 '16 at 17:50

score 0 · Answer 5 · answered Nov 11 '16 at 17:33

0

Show it before request is sent and hide when it's done.

$('#loader').show();
$.post('example.php', function() {
    alert('success');
}).always(function() {
    alert('finished');
    $('#loader').hide();
});

answered Nov 11 '16 at 17:33

Kostya Shkryob

2,344
17
24

where I place #loader? – Shah Rushabh Nov 11 '16 at 17:39
1

anywhere in your body, just apply css to make it look like loader in center @ShahRushabh – Parth Mahida Nov 11 '16 at 18:07

score 0 · Answer 6 · answered Nov 11 '16 at 17:41

Using $.ajax I think could be easier:

$.ajax({
  url: base_url + "index.php/myad/getphonenumber",
  beforeSend: function(xhr){
     //show load },
  data: { uniqueid: id, emailaddress: cemail }
  }).done(function(d){
    alert('email is sent');
  }).always(function(){
     //remove load
  })

show loader when ajax is working

6 Answers6