Question

I am using a dialog as a loading overlay for various AJAX functions, but when the dialog has show or hide animations attached to it, the dialog will not open/close until the AJAX function is complete.

Here is the (simplified) code I am using:

$("#loading_dialog").dialog(
{
  show: "fade",
  hide: "fade",
  closeOnEscape: false,
  stack: false,
  draggable: false,
  height: 421,
  width: 500,
  modal: false,
  position: {my: 'right', at: 'left', of: '#side_div', offset: "2 0"},
  resizable: false,
  dialogClass: 'loading',
  zIndex: 900,
  autoFocus: false
});

$("#start_ajax").click(function()
{
  $("#loading_dialog").dialog("open");

  $.when(ajaxFunction())
  .then(function()
  {
    //do stuff
    $("#loading_dialog").dialog("close");
  })
  .fail(function()
  {
    //handle error
  });
});

#loading_dialog doesn’t open until the call in ajaxFunction() has finished, but does immediately when I comment out the show option in the dialog initialization. The same happens when I try and close dialogs as well.

Is it just me?

Answer 1

$.when(ajaxFunction())

is your problem. Don’t wait for the ajax to finish, utilize the ajax callback function. The whole idea of AJAX is not blocking, which you are explicitly doing.

Stick this:

$("#loading_dialog").dialog("close");

into the ajax callback.