How to attach callback to jquery effect on dialog show?

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?

Melanism

what about the open event ? jqueryui.com/demos/dialog/#event-open This event is triggered when dialog is opened. Code examples Supply a callback function to handle the open event as an init option. $( ".selector" ).dialog({ open: function(event, ui) { ... } }); – Laundress

@max4ever: open will fire when the dialog opens, the OP wants to be notified when the animation has stopped. – Subtitle

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

Subtitle

I'll just also accept your answer because it wouldn't be any profit for myself to just accept my own answer. – Melanism

Heh, thanks. Honestly wasn't posting it for points. I had literally just pasted my answer in after digging through the code myself :-) – Subtitle

Sadly, this does not work anymore since version 1.10.x. jsbin.com/obuza3/50/edit – Frameup

Thanks for the update. I'll take a look over the next couple of days. – Subtitle

I already found a solution a few days ago, check my answer below. – Frameup

Please edit your answer to reflect that it will not work past 1.10.x. – Yearning

@VaelVictus anyone with enough rep can edit my answer, which is actively encouraged by SO. I'll edit it this time though since you asked nicely :D – Subtitle

Well, gee, thanks for the downvote with no explanation – Subtitle

What string would I use for effect if I don't actually want an effect, just whatever it would do without the "show" option? – Suspension

@Suspension it might be better to ask a new question with a working example of your problem. My answer has been superseded as the jQueryUI code has moved on. I believe the effect is a required parameter when supplying show with an Object value. The modern answer below has hooked into the promise().done directly in the open function and would not require any non-default configuration of the show function which may be what you need. – Subtitle

Answer 2

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/

Frameup

Do you mean the opposite? I didn't use when().done. Anyway, it ultimately returns a Promise object so I don't see the benefit, just extra overhead. – Frameup

In September 2014, this is perfect. – Postmillennialism

This doesn't seem to wait until after a "delay" with show. OR, really what's at issue with my code is when I put in the "show:", the code I have to change the button focus in the dialog (now put in the above open: callback, no longer works). – Griseldagriseldis

$(this).parent() can be replaced with $(this).dialog('widget') – Andriette

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 :)

Melanism

Damn, I was literally about to write that! – Subtitle

I am not getting the "complete:" callback. – Griseldagriseldis

Answer 4

Try to use open event of dialog:

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

Lieb

This will not solve it unfortunately. The OP wants a callback when the animation has finished. Try changing the animation to a longer one like shake and note that the open callback is fired at the beginning of the animation, not the end. – Subtitle

Answer 5

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();
},

Griseldagriseldis

But, this is less than perfect, as the change in focus (from one of my buttons to the other) is visibly noticeable. :(. – Griseldagriseldis