jQuery Ajax Loader

Question

Greetings,

I would like to know what should I do to make appear a ajax loader...

actually I am calling a function in ajax... everything is going well

here is how it's being done

 $('#txtEmail').blur(function()
    { 
        $.post("ajaxAvailability.aspx",{ email:$(this).val() } ,function(data)
        {
            if(data=='false')

...

Now I would like to have a loader so I done it like this:

$('#loader').ajaxStart(function() {
       $(this).show();
     }).ajaxStop(function() {
       $(this).hide();
     });

This should be working? what is happening is that I am getting an exception inside the jquery.js....

-thanks in advance

Answer 1

Greetings, for everyone

The solution for this issue is correct the jquery-1.3.2-vsdoc2.js file

on the ajax function there are f parameter, this should be replaced into callback

Answer 2

I usually do this in my code:

$('#txtEmail').blur(function(){
  var value = $(this).val();
  //display loader image
  $("#indicator").html("<img src="PATH/loading.gif" alt="" /> Sending...").show();
  $.post(URL,
    { email:value },
    function(data) {
      $("#indicator").empty().hide();
      //...
    });
)};

In above code, the animated image will appear inside DOM element with id="indicator". After AJAX request completed, I emptied the container, then hide it. Adjust this according to your page element.

My another code use jQuery blockUI, usually when submitting form, to prevent double submit. Check the web for the usage example.