How to attach callback to jquery effect on dialog

Question

My problem is that I do not know how to attach callback to the jquery ui dialog show.

The show is actually an option:

$( ".selector" ).dialog({ show: 'slide' });

I want to have a callback after the slide animation is complete. I looked from the effects itself and they have a callback:

effect( effect, [options], [speed], [callback] )

But in the dialog the effect is set up very differently. I tried also putting:

$( ".selector" ).dialog({ show: 'slide', callback: function() {} });

But it didn't work.

Suggestions?

Answer 1

Update 2015-07-27 For anyone using jQuery v1.10.0 or above please see this other answer as my solution will not work with newer versions of jQuery.

---

Original answer

Already answered but since I had an answer, I'm going to post it anyway…

$('#dialog').dialog({
    show: {
        effect: 'slide',
        complete: function() {
            console.log('animation complete');
        }
    },
    open: function(event, ui) {
        console.log('open');
    }
});

Shows open followed by animation complete in the Console

Answer 2

I found it necessary to use the "focus:" event. I was losing the correctly selected button because of the show:. Lovely interactions.

focus: function( event, ui ) {
    $(this).siblings('.ui-dialog-buttonpane').find("button:contains('Upload')").focus();
},

Answer 3

I downloaded the jquery ui dev bundle and found out that the callback is set with "complete":

$( ".selector" ).dialog({ show: 'slide', complete: function() {} });

Thanks for everyone trying to help solve this :)

Answer 4

Try to use open event of dialog:

$( ".selector" ).dialog({
   open: function(event, ui) { ... }
});

Answer 5

Two years later, the suggested solution (by @andyb) is no longer working in current versions of jQuery UI (specifically since v1.10.0). His solution relied on the complete callback method - an undocumented feature .

I've came up with an up-to-date solution, using jQuery Promise object:

$("#dialog").dialog({
    show: {
        effect: "drop",
        direction: "up",
        duration: 1000
    },
    hide: {
        effect: "drop",
        direction: "down",
        duration: 1000
    },
    open: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Opened");
        });
    },
    close: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Closed");
        });
    }
});

Here is the usual JSFiddle Demo: http://jsfiddle.net/losnir/jcmpm/