2

Because the page I am working on is an intranet page, my AJAX call is very quick along with the response. For usability purposes I'd like a short 1-2 sec pause to display a loading animation. Below is what I have tried but the animation is barely visible.

$(document).ready(function(){ 
    $('#wait').hide();
    $('#submitform').click(function(){
    $('#wait').show();
    $.ajax({
        type: "POST",
        url: "abs_newabs_check.asp",
        data: { StaffID: $("#suggest1").val() },
        success: callback
    });

});
});

function callback(data, status)
{
    $('#wait').hide();
    $("#ajaxdiv").html(data);
}
1
  • 2
    "I want to make my application slower", what an interesting idea :-)
    – naivists
    Commented Jan 15, 2010 at 9:44

3 Answers 3

5

I would have to suggesting thinking about a different way to add usability you are now slowing down your service to help users. What about using the Yellow Fade Technique That way you can show something has changed on the page and you are not slowing down your system.

Here is a related question that may help. Yellow fade Effect with JQuery

1
  • Thanks for that. I have implemented that along with my loading animation.
    – tonyyeb
    Commented Jan 15, 2010 at 11:40
3

Add a setTimeout call to the callback function:

function callback(data,status) {
  setTimeout(function() {
    $("#wait").hide();
    $("#ajaxdiv").html(data);
  }, 1500);
}

nb. the data parameter will be passed into the anonymous function as a closure, if I'm not mistaken

1

Use setTimeout function

setTimeout("alert('5 seconds has passed.');",5000);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.