Event to wait for dialog to disappear

Question

In a modal dialog form I'm working on using Knockout.js, the "Submit" button triggers a method which should hide the dialog and then set the value of a variable.

self.updateSubTask = function(subTask) {
    ...
    $('#subTaskDialog').modal('hide');
    self.selectedSubTask(null);
};

When this function is called, the hide process begins - the dialog itself is removed - but is stopped before completion, and the grey background persists indefinitely. After some investigation, it is most likely that this is because the subsequent call to set the value of self.selectedSubTask is disrupting the hide "animation". Unfortunately, the modal call must be made before the change to selectedSubTask due to the way the dialog is set up. I've tried the following:

_.defer(function() { self.selectedSubTask(null); })
$('#subTaskDialog').queue(function() { self.selectedSubTask(null); });

Unfortunately, neither of these methods work, and the behaviour is the same.

I figure that a reasonable course of action would be to listen for when the dialog is hidden, and include the selectedSubTask call in that event handler. I'm having difficulty finding a solution to achieve this, however. Any suggestions on how to do this, or any other methods to achieve my ultimate aim, would be greatly appreciated. Cheers!

Have you tried the solutions in [this](http://stackoverflow.com/questions/22056147/bootstrap-modal-backdrop-remaining) or [that](http://stackoverflow.com/questions/11519660/twitter-bootstrap-modal-backdrop-doesnt-disappear) question? — wes, Aug 08 '14 at 21:23
I have, and unfortunately, neither helped. Cheers for the suggestions, though! — Dan McElroy, Aug 10 '14 at 13:52

PaulDapolito · Accepted Answer · 2014-08-08T16:36:06.450

Just bind a function to the event in which the modal is hidden (this event is referred to as hidden.bs.modal):

self.updateSubTask = function(subTask) {
    $('#subTaskDialog').modal('hide');

    // capture the modal's "hidden" event
    $( "#subTaskDialog" ).on('hidden.bs.modal', function(){
        self.selectedSubTask(null);
    });
};

From the Bootstrap documentation on hidden.bs.modal:

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

There is also a hide.bs.modal event, in case that suits your desired functionality better. From the Bootstrap documentation:

This event is fired immediately when the hide instance method has been called.

Thanks for the answer, I'll try it out when I get access to the code again tomorrow and let you know if it works. — Dan McElroy, Aug 10 '14 at 13:53

Event to wait for dialog to disappear

1 Answers1