Garg Garg - 2 months ago 7
Ajax Question

Making css loader on ajax search to stay more time

I have ajax search function and I'm trying to add loader while results are loading. This is the function

function search(){
var title=$("#search").val();

if(title!=""){
$("#result").html("<div class=\"loader09\"></div>");
$.ajax({
type:"post",
url:"search.php",
data:"title="+title,
success:function(data){
$("#result").html(data);
$("#search").val("");
}
});
}
}


Is it possible to make this loader
$("#result").html("<div class=\"loader09\"></div>");
to appear for longer time than it's needed? I mean currently it's appeared for 1sec because the search perform really fast. I want to stay at least 3-4 sec.

Answer

How about:

success:function(data){
    setTimeout(function(data){ 
        $("#result").html(data);
        $("#search").val(""); 
    }, 3000);  <-- 3 second delay
}

or:

function delayedResponse(data) {
    setTimeout(function(data){ 
        $("#result").html(data);
        $("#search").val(""); 
    }, 3000);  <-- 3 second delay
}

with:

success:function(data){
    delayedResponse(data);
}
Comments