25

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?

Pehmolelu
  • 3,534
  • 2
  • 26
  • 31
  • what about the open event ? http://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) { ... } }); – max4ever Aug 03 '11 at 08:33
  • 1
    @max4ever: `open` will fire when the dialog opens, the OP wants to be notified when the animation has stopped. – andyb Aug 03 '11 at 09:14

5 Answers5

39

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

Community
  • 1
  • 1
andyb
  • 43,435
  • 12
  • 121
  • 150
  • I'll just also accept your answer because it wouldn't be any profit for myself to just accept my own answer. – Pehmolelu Aug 03 '11 at 10:17
  • Heh, thanks. Honestly wasn't posting it for points. I had literally just pasted my answer in after digging through the code myself :-) – andyb Aug 03 '11 at 11:50
  • 3
    Sadly, this does not work anymore since version 1.10.x. http://jsbin.com/obuza3/50/edit – losnir Aug 15 '13 at 14:37
  • Thanks for the update. I'll take a look over the next couple of days. – andyb Aug 16 '13 at 23:09
  • I already found a solution a few days ago, check my answer below. – losnir Aug 18 '13 at 10:38
  • Please edit your answer to reflect that it will not work past 1.10.x. – Vael Victus Jul 27 '15 at 16:32
  • @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 – andyb Jul 27 '15 at 16:40
  • Well, gee, thanks for the downvote with no explanation – andyb Jul 27 '15 at 20:58
  • What string would I use for effect if I don't actually want an effect, just whatever it would do without the "show" option? – Andrew Mar 30 '16 at 22:07
  • @Andrew 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. – andyb Mar 31 '16 at 16:04
36

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/

Cœur
  • 37,241
  • 25
  • 195
  • 267
losnir
  • 1,141
  • 9
  • 14
  • 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. – losnir Aug 20 '13 at 10:43
  • 2
    In September 2014, this is perfect. – Daniel Minnaar Sep 03 '14 at 11:44
  • 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). – Chris Prince Aug 18 '15 at 18:51
  • `$(this).parent()` can be replaced with `$(this).dialog('widget')` – Nieralyte Jan 09 '18 at 09:41
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 :)

Pehmolelu
  • 3,534
  • 2
  • 26
  • 31
1

Try to use open event of dialog:

$( ".selector" ).dialog({
   open: function(event, ui) { ... }
});
Igor Dymov
  • 16,230
  • 5
  • 50
  • 56
  • 1
    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. – andyb Aug 03 '11 at 09:15
0

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();
},
Chris Prince
  • 7,288
  • 2
  • 48
  • 66
  • But, this is less than perfect, as the change in focus (from one of my buttons to the other) is visibly noticeable. :(. – Chris Prince Aug 18 '15 at 19:17