CODEWITHSUNDEEP
jquerybootstrap-4bootstrap-modal
pzyqux
pzyqux

Reputation: 64

on hide.bs.modal event not firing

i am trying to do some things when i close a bootstrap modal on the website i am making. The modal closes, but the event is not fired. I have done some troubleshooting and can not figure out what i might have done wrong. All the guides i can find have the same solution, but it does not work on my end. Does anyone know what i might have done wrong?

Script:

$( function(){
    $('#exampleModal').on('hide.bs.modal', function (e) {
        alert('modal closed');
        document.getElementById("errorContainer").classList.add("hidden");
    });
});

HTML:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Choose a date</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                
                    <p>Date: <input type="text" id="datepicker"><button onclick="gotoEvent();">To event</button></p>
                    <div id="errorContainer" class="hidden"><p>Choose date first!</p></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

bootstrap and jquery are linked in and work in other functions. (bootstrap version:4.6.0, Jquery version:3.5.1)

Edit: Found the problem, forgot to remove link to old jquery version when i upgraded to a newer jquery version. This is why it worked in other functions and not this one.

Upvotes: 0

Views: 1207

Answers (3)

pzyqux
pzyqux

Reputation: 64

I found the problem. When i added a newer version of jquery i forgot to remove the link in to the old version. This is why some jquery functions worked and this one did not. It works now!

Upvotes: 0

Dori Rina
Dori Rina

Reputation: 409

You can try the following code:

$(document).ready(function(){
    $('#exampleModal').on('hide.bs.modal', function () {
        alert('modal closed');
        document.getElementById("errorContainer").classList.add("hidden");
    });
});

Upvotes: 1

David Br&#246;dner
David Br&#246;dner

Reputation: 101

Do you add ur modals dynamically? if yes try something like that:

$(document).on('hide.bs.modal', '#exampleModal', function(e) { 
    alert('modal closed');
    document.getElementById("errorContainer").classList.add("hidden");
}

Upvotes: 1

Related Questions