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

User · Answer

Wrap your function in   document  ready function         or more simply    function      In CoffeeScript  this would look like   - gt        myModal   on  show bs modal    event - gt   Without it  the JavaScript is executing before the document loads  and  myModal is not part of the DOM yet  Here is the Bootstrap reference

User · Answer

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

User · Answer

In my case  I was missing the  modal-dialog div  Doesn t fire event  shown bs modal   lt div id  loadingModal  class  modal fade  gt     lt p gt Loading    lt  p gt   lt  div gt    Does fire event  shown bs modal   lt div id  loadingModal  class  modal fade  gt     lt div class  modal-dialog  gt             lt p gt Loading    lt  p gt     lt  div gt   lt  div gt

User · Answer

document  on  shown bs modal    modal   function           TODO EVENTS

User · Answer

Make sure that you really use the bootstrap jquery modal and not another jquery modal    Wasted way too much time on this

User · Answer

Add this     document  ready function          document  on  shown bs modal    modal   function                  DO EVENTS

User · Answer

use this     document  on  show bs modal    myModal   function        alert  hi

User · Answer

I had a similar but different problem and still unable to work when I use     myModal     I was able to get it working when I use   window    My other problem is that I found that the show event would not fire if I stored my modal div html content in a javascript variable like    var content   lt div id  myModal          content  modal      window  on  show bs modal   function  e      alert  show test          the event never fired because it didn t occur   my fix was to include the divs in the html body   lt body gt       lt div id  myModal  gt                  lt  div gt       lt script gt              myModal  modal              window  on  show bs modal   function  e                alert  show test                     lt  script gt   lt  body gt

User · Answer

Ensure that you are loading jQuery before you use Bootstrap  Sounds basic  but I was having issues catching these modal events and turns out the error was not with my code but that I was loading Bootstrap before jQuery

User · Answer

i used jQuery s event delegation  bubbling    that worked for me  See below     document  on  click     btnSubmit   function                      alert  hi loo                     very good info  too  https   learn jquery com events event-delegation

User · Answer

Sometimes this doesn t work if   1  you have an error in the java script code before your line with     myModal   on  show bs modal       To troubleshoot put an alert message before the line to see if it comes up when you load the page  To resolve eliminate JSs above to see which one is the problem  2  Another problem is if you load up the JS in wrong order  For example you can have the     myModal   on  show bs modal      part before you actually load JQuery js  In that case your call will be ignored  so first in the HTML  view page source to be sure  check if the script link to JQuery is above your modal onShow call  otherwise it will be ignored  To troubleshoot put an alert inside the on show an one before  If you see the one before and not the one inside the onShow function it is clear that the function cannot execute  If the spelling is right more than likely your call to JQuery js is not made or it is made after the onShow part

User · Answer

Similar thing happened to me and I have solved using setTimeout   Bootstrap is using the following timeout to complete showing      c TRANSITION DURATION 300 c BACKDROP TRANSITION DURATION 150    So using more than 300 must work and for me 200 is working       myModal   on  show bs modal   function  e        setTimeout function              Do something if necessary        300

User · Answer

This happens when code might been executed before and it s not showing up so you can add timeout   for it tp fire    document  on  shown bs modal   function  event          setTimeout function            alert  quot Hi quot            1000

User · Answer

In my case the problem was how travelsize comment   The order of imports between bootstrap js and jquery  Because I am using the template Metronic and doesn t check before

User · Answer

I had the same issue with bootstrap4  The solution was to add it inside the jQuery document ready   function     document  ready function             myModal   on  show bs modal   function             alert  hi

User · Answer

Had the same issue  For me it was that i loaded jquery twice in this order   Loaded jQuery Loaded Bootstrap Loaded jQuery again  When jQuery was loaded the second time it somehow broke the references to bootstrap and the modal opened but the on  shown bs     method never fired

User · Answer

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

User · Answer

Below are the granular details   show bs modal works while model dialog loading shown bs modal worked to do any thing after loading  post rendering

User · Answer

Remember to put the script after the call of  js bootstrap   not before

[modal-dialog] bootstrap jquery show.bs.modal event won't fire

Examples related to twitter-bootstrap-3

Examples related to jquery

[modal-dialog] bootstrap jquery show.bs.modal event won't fire

Examples related to modal-dialog

Examples related to twitter-bootstrap-3

Examples related to jquery