Loading gif image while jQuery ajax is running

Question

I am trying to show a loading image while my ajax call is running, however using the beforeSend attribute is not changing my result area.

$.ajax         


        

Answer 1

I have a solution, it may not be the best way to do it but it has worked in this case.

$('input').keyup(function () {

  $('#response').text('loading...');

  $.ajax({
    url: "/answer_checker.php",
    global: false, type: "POST", 
    data: ({...clipped...}), 
    cache: false,
    success: function(html) {
      $('#response').html(html);
    }
  });
});

By setting the resonce content before calling the ajax function it remains showing the loading text until the ajax call updates the same content.

Thanks to everyone who took the time to answer.

Alan