jQuery UI Diolog execute function after show-effect is finished

Question

I am coding with jQuery and jQueryUI at the moment. I am using the jQuery Dialog Widget. (jQuery API - Dialog Widget)

I am opening a dialog and use a show-method for that, the code is something like this:

$("#dialog").dialog({
    dialogClass: 'myclass',
    height: 'auto',
    width: 'auto',
    modal: true,
    resizable: false,
    draggable: false,
    buttons: [{ text: "Ok", click: function () { $(this).dialog("close"); } }],
    show: { effect: "slide", duration: 1000, direction: "right", finish: function () { $(".myclass.ui-dialog").css("position", "fixed"); console.log("done after effect"); } },
    position: { my: "right top", at: "right top", of: window },
});

The important part is the show: there. All of it is working except the "finish" parameter. Is there any other way to add a function after this show effect is finished?

I just want to make my dialog fixed so that it stays on its position if you are scrolling. I tried to overwrite the css class and it works, but while the effect is running, the display is broken (displayed on the left instead of right) and just after it it is correct, so I wanted to try to add it after the effect.

So, is there a good way?

score 2 · Accepted Answer · edited May 23 '17 at 12:20

2

look here second answer, since first one isnt working anymore

open: function () {
    $(this).parent().promise().done(function () {
        console.log("[#Dialog] Opened");
    });
}

edited May 23 '17 at 12:20

Community

1
1

answered Mar 08 '14 at 23:07

JohnnyAW

2,866
1
16
27

You solution is working with a bit delay. (I think cause it listens for the event?) It is something under a second, but feelable sometimes. But shouldn't be a problem here for me, your way is much better (: Thank you. – Wolfsblvt Mar 08 '14 at 23:26

score 0 · Answer 2 · answered Mar 08 '14 at 23:15

Ah, I found a solution myself. Maybe it is just a workaround, but it is working.

I added the option autoOpen: false, to the dialog and added the following lines ather the dialog creation:

$("#dialog").dialog('open');
$(".achievement_dialog.ui-dialog").wait(1000, function () { $(this).css("position", "fixed"); console.log("done after effect"); });

The Method wait() is selfcoded jQuery function i created once for cases of waiting functions:

$.fn.wait = function (timeout, callback) {
    /// <summary>
    ///     Timeout for animations or show/hide-effects. Put the functions that should be executed after it in the callback function,
    ///     if they are no animations (or the won't wait).
    /// </summary>
    /// <param name="timeout" type="int">Time in miliseconds to wait</param>
    /// <param name="callback" type="Function">A function to execute after the time</param>
    /// <returns type="jQuery" />
    if (typeof timeout == 'undefined')
        timeout = 1000;
    $(this).animate({ opacity: 1.0 }, timeout, callback);
    return this;
};

This is working for me if I use the same wait-time as the time of the show animation. But I'll look at JohnnyAWs answer. that sounds even better.

jQuery UI Diolog execute function after show-effect is finished

2 Answers2