Question

I have a problem with the Dojo Dijit Dialog .hide() method during the animation sequence. I am using Dojo 1.7 with Tundra theme. I have a cancel button in my dialog that closes the dialog.

        var global_welcome = new Dialog({
            id: 'global_welcome',
                style: "width: 750px",
            draggable: false,

        content: '<button type="button" id="global_welcomeCancel"> Cancel </button>',
        onShow : function () {
                                on(dojo.byId('global_welcomeCancel'), "click", function (evt) {
                                    dojo.stopEvent(evt);
                                    global_welcome.hide();   
                                   });              
                                 });
        }
    });

This produces the following error on Firebug:

exception in animation handler for: onEnd                  fx.js (line 152)

TypeError: this._fadeOutDeferred is undefined
this._fadeOutDeferred.callback(true);

Previous answers to this error but with destroyRecursive instead of hide suggests it has to do with the dialog being destroyed before the animation finishes. I tried using dojo.hitch() and setTimeOut but that didn’t seem to work. Also what is puzzling is that the first time I open this dialog using global_welcome.show() (called by another button), and press the cancel button, it works without error. The second time and afterwards, it produces the above error message. Additionally, the default close button for dojo dialogs on the top right corner never causes this error. Perhaps I could just have onShow call the methods that the close button calls?

Can someone help me out please? Thanks in advance!

Answer 1

The problem is in your onShow method. You wire up to the click event to hide, but never disconnect it. When you open the dialog the again, you wire the click method to hide the dialog again. The result is that hide will be called twice when you try to close the dialog for the second time. The error gets thrown with the second call to hide because the animations have already been destroyed.

Try this:

var signal = on(dojo.byId('global_welcomeCancel'), "click", function (evt) {
    dojo.stopEvent(evt);
    signal.remove();
    global_welcome.hide();   
});