On my website I have two jQuery UI dialogs. One dialog just shows gif image (working animation). I call it before doing AJAX request. After AJAX request is done, I need to close that first dialog, and show second. I do it like this:

$("#dialog-working").dialog("close");
$("#dialog").dialog("open");

but this obviously isn't working. When I do this, both dialogs are visible for some time.

Because of that, I am searching for a way to open second dialog only after first dialog is close (after his animation has completed). Can you help me ?

Thanks !

• jquery
• jquery-ui
• jquery-dialog

Your questin is not very clear. To do something after the dialog closes:

$('#dialog').bind('dialogclose', function(){
    //Do something
});

Check out the dialog close event.

http://jqueryui.com/demos/dialog/#event-close

Check this

Here:

<div class="demo">
  <div id="dialog">
    <p>This is the default dialog</p>
  </div>
  <div id="opener">Click to open</div>
</div>

And here:

$(document).ready(function() {
$("#dialog").dialog({
    autoOpen: false,
    title: 'My dialog title'
});

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

/* this one beeing of interest for you */
$( "#dialog" ).dialog({
   beforeClose: function(event, ui) {
       alert("dialog is gonna be closed now");
   }
});

$('#opener').click(function() {
    $("#dialog").dialog('open');       
    return false;
});   

});