bootstrap jquery show.bs.modal event won't fire

Question

i'm using the modal example from the bootstrap 3 docs. the modal works. however i need to access the show.bs.modal event when it fires. for now i'm just trying:

$('#myModal').on('show.bs.modal', function () {
   alert('hi')
})

Nothing happens, the event does not fire. What am I doing wrong??? This doesn't make sense to me.

Solution 1

use this:

$(document).on('show.bs.modal','#myModal', function () {
  alert('hi');
})

Solution 2

Make sure you put your on('shown.bs.modal') before instantiating the modal to pop up

$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });

or

$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
}).modal('show');

To focus on a field, it is better to use the shown.bs.modal in stead of show.bs.modal but maybe for other reasons you want to hide something the the background or set something right before the modal starts showing, use the show.bs.modal function.

Solution 3

Wrap your function in $(document).ready(function() { }), or more simply, $(function() {. In CoffeeScript, this would look like

$ ->
  $('#myModal').on 'show.bs.modal', (event)->

Without it, the JavaScript is executing before the document loads, and #myModal is not part of the DOM yet. Here is the Bootstrap reference.

Solution 4

$(document).on('shown.bs.modal','.modal', function () {

/// TODO EVENTS

});

Solution 5

Try this

$('#myModal').on('shown.bs.modal', function () {
   alert('hi');
});

Using shown instead of show also make sure you have your semi colons at the end of your function and alert.

View more solutions

Comments

[m4rlo]

Both 'show.bs.modal' and 'shown.bs.modal' should work for my purposes, they are both listed as valid events in the bootstrap docs. still doesn't work.

[Trevor]

Have you verified that your jQuery is working e.g. $(document).ready(function(){alert('test');});

[m4rlo]

yes if i put an alert outside the show event, just within document.ready, then it fires.

[Trevor]

Try making an example of you code here bootply.com/new and see if it works. If it doesn't work share your link and I can take a look at it.

[Trevor]

Make sure you have your bootstrap.js file loaded.

[m4rlo]

thx for your help trevor -- it is rly still a mystery to me why it won't work. everything on my site is just like in your example. and i have a lot of experience with jquery/bootstrap. something weird and underlying must be going on but i don't even know where to look.

[m4rlo]

bootstrap.js is definitely loaded

[Trevor]

Okay no problem, you could share your html and or webpage if you think it would help. Good luck figuring out what is going on.

[m4rlo]

sure, here is the dev site - it's not cleaned up so disregard a lot of it -- the only thing i care about is that the alert('hi') work when the modal is fired. i just inserted the example to test.

[Bass Jobsen]

The requested URL /gunnar_bootstrap/didyouseethis/js/application.js was not found on this server.

[Trevor]

@BassJobsen He is referencing application.js twice in his html one of them is loading the correct file. The other it's not found.. Would that cause the issue?

[Harish Kanakarajan]

This solved my problem. But I placed it outside the document.ready function. When I placed within document.ready, It was not working. Might help someone.

[Akshay Vishnoi]

Thanks @Trevor. It worked for me too. I was including 2 jquery.js. :-p

[ShellZero]

This is what I have been searching for! Thanks for pointing out the transition duration of the bootstrap! Kudos :D Even 150 works too :)

[kjdion84]

This should be the accepted answer as it works perfectly with dynamically created ajax modals via $(data).modal('show');.

[Pierre]

@kjdion84 - there where you create them, you should bind the events. `var amodal = $("<div modal... />"); amodal.on(...,myfunc).modal('show');

[kjdion84]

You don't have to bind any events if you use $(document).on().

[mabu]

somehow this was the most helpful answer to me. it seems like working with .modal instead of referencing the modals id was the solution... thanks!

[Max]

^This solves my problem. Also, show.bs.modal is different from shown.bs.modal. The former fires when the modal is about to show. The latter when it has been shown. Big different.

[przno]

This would fire for each modal you have on the document. To target only specific modal you could use $(document).on('hidden.bs.modal', function (e) { if (e.target.id === 'my-modal-id') { alert('hi'); } });. Id here comes from <div class="modal fade" id="my-modal-id">

[Tom]

@przno No it wouldn't, the second argument is the selector which specifies the element.

[Ian Wold]

This helped me - $('#myModal').on('show.bs.modal'...) needs to be after JQuery is loaded. Thanks!

[IDED]

This is the best answer as it is nonspecific and will trigger on any modal being shown rather than when just a set modal triggers.

[Ali]

When you use $(document).on(... you attach your listener to document context, and its no matter if your target elemnts is exists or not. You should add event name as first argument and callback fanction as last, but you can add a query selector as second argument

[Pierre]

@KUMAR it is the event which bootstrap is calling when you call .modal('show'). There are four events it calls for modals: [show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - show is when it is going to show, shown when it is showing, the same for hide and hidden. getbootstrap.com/docs/3.4/javascript/#modals-events

[Adam Hughes]

Thank you - being a JS noob, had to wade through a ton of related questions/answers to find that this solved my problem of the modal, for whatever reason, only firing hte event handler on the second load (see stackoverflow.com/questions/20339958/…)

[Stephan]

Thanks. I had jquery loaded on the _Layout.cshtml and on my view on ASP.NET. I took me hours till I flow by your comment.

[Matthieu Charbonnier]

1000 is not enough, you can put 999999 to be sure everything is loaded

[Jason Carvalho]

This code black is missing the final bracket after }