CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
Brian
Brian

Reputation: 1164

Animation Complete Dialog

I have encountered a issue with the UI dialog. I hooked into the complete event to create a TinyMCE since it does not play nice with the animations. But it does not seem to be working in the latest version of JQuery UI.

I searched around the release notes to see if this has been changed or anything but I did not see it listed anywhere.

Is this a removed/moved functionality or is this an issue in v1.10.0?

Here is the sample code, used in the jsfiddle below:

$("div").dialog({
    show:{
        effect:"puff",
        duration:400,
        complete:function()
        {
            $(".complete").html("Animation Complete.");
        }
    }
});

Previous Version Functionality(1.9.2):

http://jsfiddle.net/N4APL/1/

Latest Version Functionality(1.10.0):

http://jsfiddle.net/jXDYz/1/

Note: I used the MS CDN for the UI javascript since jsfiddle does not have it yet.

Upvotes: 2

Views: 2285

Answers (2)

losnir
losnir

Reputation: 1171

As @brian noted, the complete callback feature was removed on v1.10.0, and never added back since than. Brian's method is neat, however, will only work on open.

Here I propose a more correct approach that would work for both open and close:

https://stackoverflow.com/a/18257205/2678731

Tested successfully on (latest) v1.10.3: http://jsfiddle.net/losnir/jcmpm/

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

It was quite a journey, but I finally figured out your problem and solution.

Indeed this complete feature has been removed from jQuery UI dialog 1.10.0. It's not in the API. I'm not sure why it was removed, and they certainly don't have it documented in the upgrade guide.

After some digging into the 1.10.0 code, I found this:

this._show( this.uiDialog, this.options.show );

As you can see, there is no callback to ._show (which is just jQuery's .show) and no way to set a callback either. Ack! You're stuck.

...or you would be were jQuery 1.10.1 not on the way:

this._show( this.uiDialog, this.options.show, function() {
    that._focusTabbable();
    that._trigger("focus");
});

You still can't set a callback directly, but you can set it via the focus option in 1.10.1. I have confirmed that this works.

I still think this will be quite a bit shaky for others, but at least not for you. You have the option of either upgrading to jQuery 1.10.1 now or just waiting it out with 1.9 until it comes.

Upvotes: 4

Related Questions