Reputation: 1193

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

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.

Upvotes: 108

Answers (23)

SUNG Davao

Reputation: 1

in my case like this...

const myModal = document.getElementById('myModal');
myModal.addEventListener('shown.bs.modal', () => {
  console.log('SHOWN');
});
myModal.addEventListener('hidden.bs.modal', () => {
  console.log('HIDDEN');
});

Bootstrap 5.2v Modal

Upvotes: 0

Luis Felipe del Real Cintolesi

Reputation: 131

Native JavaScript event listener work:

$('#myModal')[0].addEventListener('shown.bs.modal', () => { 
    alert('hi');
});

document.getElementById('myModal').addEventListener('shown.bs.modal', () => {   
    alert('hi');
});

Upvotes: 0

Yuri Natividade

Reputation: 354

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')
    })
})

Upvotes: 4

Motalib Hossain

Reputation: 184

Try like this.

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

Upvotes: 0

Matthieu Charbonnier

Reputation: 2982

The popular solution to put a setTimeout could work in some case, but is a terrible solution. I was myself using it amongst wraping it in $(document).ready() off course (but it never helped), but I was never able to have a reliable solution. Some browser/system take more time than other, and sometime 1000ms was not enough. And I was tired searching why the $(document).ready() wasn't helping, so :

I took a different approach.

I make the subscription to modal events when I need to use the modal for the first time.

<a href="javascript:void(0)" onclick="ShowModal()">Open my modal</a>

and on the JS side :

function ShowModal() {
    InitModalEventsOnce();
    $('#MyModal').modal('show');
}

var InitModalEventsIsDone = false; // Flag to keep track of the subscribtion

function InitModalEventsOnce() {

    if (!InitModalEventsIsDone) {
        InitModalEventsIsDone = true;

        $('#MyModal').on('shown.bs.modal', function () {
            // something
        })

        $('#MyModal').on('hidden.bs.modal', function (e) {
            // something
        });
    }
}

And that's it! The only reliable solution I found.

Upvotes: 0

Chloe

Reputation: 26264

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.

Upvotes: 27

Suraj Gupta

Reputation: 41

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("Hi");
      },1000); 
    });

Upvotes: 4

d00d

Reputation: 753

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.

Upvotes: 4

Samuel Darteh

Reputation: 39

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/

Upvotes: 0

Didier Kernwein

Reputation: 53

Make sure that you really use the bootstrap jquery modal and not another jquery modal.

Wasted way too much time on this...

Upvotes: 1

Gregorio Centurión

Reputation: 1

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

Upvotes: 0

Marius

Reputation: 190

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

Upvotes: 2

aeroson

Reputation: 1129

In my case, I was missing the .modal-dialog div

Doesn't fire event: shown.bs.modal

<div id="loadingModal" class="modal fade">
  <p>Loading...</p>
</div>

Does fire event: shown.bs.modal

<div id="loadingModal" class="modal fade">
  <div class="modal-dialog">      
    <p>Loading...</p>
  </div>
</div>

Upvotes: 5

zaarour

Reputation: 105

Add this:

$(document).ready(function(){
    $(document).on('shown.bs.modal','.modal', function () {
         // DO EVENTS
    });
});

Upvotes: 8

Iúri Batista Teles

Reputation: 101

Remember to put the script after the call of "js/bootstrap", not before.

Upvotes: 3

Zeekoi Inc.

Reputation: 141

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

/// TODO EVENTS

});

Upvotes: 14

travelsize

Reputation: 74

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.

Upvotes: 2

Ali

Reputation: 1568

use this:

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

Upvotes: 135

itsazzad

Reputation: 7277

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);                        
})

Upvotes: 7

Pierre

Reputation: 9052

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 });

$("#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.

Upvotes: 91

wjfinder77

Reputation: 143

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="<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

<body>
    <div id='myModal'>
       ...
    </div>
    <script>
        $('#myModal).modal();
        $(window).on('show.bs.modal', function (e) {
            alert('show test');
        });
    </script>
</body>

Upvotes: 3

Anand

Reputation: 5

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

Upvotes: -1

Trevor

Reputation: 16116

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.

Upvotes: 12

bootstrap jquery show.bs.modal event won&#39;t fire

Answers (23)

Related Questions

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