How to show a message "Sorry it is taking time to load" on ajax if call take longer time

Question

Say suppose there is my ajax call which call my PHP function to get some result.

$('.ui-loader').show();
$.ajax({
        url: BASE_URL +'some_page.php',
        type: 'POST',
        datatype: 'json',
        async:false,
        success: function (response) {

             // response will get my result from "somepage.php"
             $('.ui-loader').hide();

        },
        error: function (jqXHR, textStatus, errorThrown) {
            //alert(jqXHR.status);
        }
    });

How can I show a another loader which is stating that "Sorry it is taking time please wait" when ajax response taking time to get the result?

I come across ajaxStart() and ajaxStop() but how can I use here? Can you guys please guide me to achieve this thing.

Note : $('.ui-loader').show(); is a simple loader I want to hide this loader and show another which is stating "Sorry it is taking time please wait".

Thanks in advance.

http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery — Sadikhasan, Jan 08 '15 at 06:03

score 1 · Answer 1 · answered Jan 08 '15 at 06:03

1

You could do that using setTimeout like:

var longWaitTimerId = setTimeout(function () {
    //took longer than 5 seconds
}, 5000);

$.ajax({
    ...
    success: function (response) {
        clearTimeout(longWaitTimerId);
        ...
    },
    error: ... same as above
});

answered Jan 08 '15 at 06:03

plalx

42,889
6
74
90

`clearTimeout(longWaitTimerId);` what it will do can you please explain me in detail. When I should show my specific loader when it will take more than 5 sec – Rakesh Shetty Jan 08 '15 at 06:05
`setTimeout` basically queues a function to be executed in `x` milliseconds. `setTimeout` returns the timer id so that it can be cancelled using `clearTimeout`. – plalx Jan 08 '15 at 06:06

score 0 · Answer 2 · edited Jan 08 '15 at 06:40

function MakeAjaxCall(){
//timer to show another loader
var timer = window.setTimeout(function(){
        $('.ui-loader').hide();
        $('.ui-AnotherLoader').show();
    }, 2000);
$('.ui-loader').show();
$.ajax({
    url: BASE_URL +'some_page.php',
    type: 'POST',
    datatype: 'json',
    async:false,
    success: function (response) {
          //clear the timer if ajax call take less time
          wiundow.clreatTimeout(timer);
         // response will get my result from "somepage.php"
         $('.ui-loader').hide();
         $('.ui-AnotherLoader').hide();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        //alert(jqXHR.status);
    }
});
}

`wiundow.clreatTimeout(timer);` syntax error correct it to `window.clearTimeout(timer);` — Rakesh Shetty, Jan 08 '15 at 06:09

How to show a message "Sorry it is taking time to load" on ajax if call take longer time

2 Answers2