Add preloader to this JQuery.post() script

Question

Hello,

I am using following code to get relevant search result :

<form>
<input id="message" type="text" name="search" value=""/>  
</form>

<div id="searchresults" class="contentbox"></div> 
<div id="noresult" class="contentbox" style="display:none">no results found.</div>


function getticketsuggestions() { 
    currentcheckcontent = $("#message").val();
    if (currentcheckcontent) {
        $.post("submitticket.php", { action: "getkbarticles", text: currentcheckcontent },
        function(data){                                      
            if (data) {               
                $("#searchresults").html(data);                
                $('#noresult').hide();
                $("#searchresults").fadeIn('slow');
            }
            else {
            $('#noresult').fadeIn(3000); 
            $("#searchresults").hide();
            }
        });
        lastcheckcontent = currentcheckcontent;
    } 
        setTimeout('getticketsuggestions();', 3000);                
}
getticketsuggestions();

This code works perfect. I get all search result inside <div id="searchresults">

I want to add Preloader "loading..." while fetching result from submitticket.php

How can I achieve this ?

Thanks

Answer 1

You can either use .ajaxStart() + .ajaxStop() handlers, which will fire globally for all ajax request you're gonna send. So you may show and hide some DIV or whatever here.

Your second option is use the underlaying .ajax() call instead of $.post(). Within here can can overwrite beforeSend and complete handlers to do the same thing, showing & hiding some info.

Example:

$.ajax({
   url:   "submitticket.php",
   data: {
      action: "getkbarticles",
      text: currentcheckcontent
   },
   type: 'POST',
   dataType: 'html',
   beforeSend: function(xhr){
       $('#info').show();  // #info must be defined somehwere
   },
   success: function(data){
       if (data) {               
            $("#searchresults").html(data);                
            $('#noresult').hide();
            $("#searchresults").fadeIn('slow');
        }
   },
   complete: function(xhr, textStatus){
        $('#info').hide();  // #info must be defined somehwere
   }
});

Ref.: .ajaxStart, .ajaxStop, .ajax

Answer 2

if you didn't want to use .ajax() for some reason you could do this with your code:

$('#someDiv').html('loading...');    
$.post("submitticket.php", { action: "getkbarticles", text: currentcheckcontent },
    function(data){                                      
        if (data) {               
            $("#searchresults").html(data);                
            $('#noresult').hide();
            $("#searchresults").fadeIn('slow');

        }
        else {
        $('#noresult').fadeIn(3000); 
        $("#searchresults").hide();
        }
    $('#someDiv').html('');
    });