Using jquery ui dialog with jquery ajax

Question

I want a modal dialog that says "Please wait, calculating", to appear while jquery.ajax is calculating the price of products, so as not to annoy users. I tried the ajaxStart() and ajaxStop() functions but it's not working properly. Please can someone give me some advice on what I'm doing wrong?

Here's the code:

var form = document.forms["orderDefinition"];

form.elements["formChangeRequest"].value = "true";
$.ajax({
  type: "POST",
  url: "ajax/possibleValues.html",
  data: $("form#orderDefinition").serialize(),
  success: function(response){
    $('#usercontent .sleeve .toprow').html(response);
    applyValidation();
  }
});

$("#waitingMsg").ajaxStart(function(){
      $(this).dialog({modal: true});
  }).ajaxStop(function(){
      $("#waitingMsg").hide();
 });

Many thanks

Answer 1

You can use 'beforeSend' and 'complete' callbacks of .ajax()

From the documentation,

"beforeSend is called before the request is sent, and is passed the XMLHttpRequest object as a parameter. complete is called when the request finishes, whether in failure or success."