0

I have a modal that when trying to run will activate a popover for validation. I've added a timeout to popover to hide after 3 seconds. But if you close the modal the timeout features seems to stop, the popover doesn't hide and even directly telling it to hide doesn't work.

Modal html

<div class="modal hide fade" id ="password_modal">
    <div class="modal-header">
        <h3>Change Password <span class="extra-title muted"></span></h3>
    </div>
    <div class="modal-body form-horizontal">
        <div class="control-group">
            <label for="current_password" class="control-label">Current Password</label>
            <div class="controls">
                <input type="password" name="current_password">
            </div>
        </div>
        <div class="control-group">
            <label for="new_password" class="control-label">New Password</label>
            <div class="controls">
                <input type="password" name="new_password">
            </div>
        </div>
        <div class="control-group">
            <label for="confirm_password" class="control-label">Confirm Password</label>
            <div class="controls">
                <input type="password" name="confirm_password">
            </div>
        </div>      
    </div>
    <div class="modal-footer">
        <button href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button href="#" class="btn btn-primary" id="password_modal_save">Save changes</button>
    </div>
</div>

Inside the modal

options = {
    content: raw_data.errors,
    html: true,
    placement: 'top',
    trigger: 'manual'
}
$('#password_modal_save').popover(options);
$('#password_modal_save').popover('show');
setTimeout(function(){ click.popover('hide'); }, 3000);

Modal close listener

$("body").on("hidden", "#password_modal", function(event){
    $(this).remove(); //Remove the modal to stop duplications
    $('#password_modal_save').popover('hide'); //Targetting the popover directly
    $('.popover').remove(); //Last solution to actually hiding it
});

I'm hoping for a cleaner way to hide the popover other than $('.popover').remove();

Fiddle: http://jsfiddle.net/La2yn/20/

Bankzilla
  • 2,086
  • 3
  • 25
  • 52
  • Can you post your html.. – PSL May 01 '13 at 00:18
  • Have added the html for the modal – Bankzilla May 01 '13 at 01:12
  • Can you make a fiddle http://jsfiddle.net/La2yn/. probably update your markup tat opens the modal. – PSL May 01 '13 at 01:26
  • Added a fiddle an in the process found that problem. I'm using bootstrap 2.1.0 and it must of been buggy as you can see in the fiddle I posted. When you made the fiddle it was using 2.3.1 and worked fine. If you post that as the answer I'll accept it since you helped find it :) – Bankzilla May 01 '13 at 03:03
  • Also something to note, for some reason in `bootstrap.2.3.1` doing `.popover('hide')` seems to also hide the modal. Happens on the popover timeout – Bankzilla May 01 '13 at 03:08
  • Thats great.. You know what you dont have to do event delegation for modal hidden event. You can directly do on('hidden') on your modal.. Also do you want to have the entire div dynamic in JS? – PSL May 01 '13 at 03:08
  • The div is getting loaded in via handlebars but setting that up in jsfiddle is pain so wrote it as a string. Here's the problem with 2.3.1 http://jsfiddle.net/La2yn/26/ wait for the `popover('hide')` event to fire after hitting the save button – Bankzilla May 01 '13 at 03:13
  • Also your modal backdrop is not disappearing.. SO need to remove it manually $('.modal-backdrop').remove(); – PSL May 01 '13 at 03:26
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29221/discussion-between-pscoder-and-bankzilla) – PSL May 01 '13 at 03:35

1 Answers1

1

Using 2.1.0 there is a bug with popover not hiding when modal is closed. Updated to 2.3.1, the popover was now closing the modal as well -.-

Added in the following code to stop the event bubbling up and closing the modal as well

$("body").on("hidden", "#password_modal_save", function(e){
    e.stopPropagation(); //Once popover is hidden stop the event from going to parent
});
Bankzilla
  • 2,086
  • 3
  • 25
  • 52