• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 20536
  • Last Modified:

Bootstrap modal how to fire event on shown and hide

Hi..
I'm using Bootstrap. I'm trying to fire an event when the modal 'window' is shown. but it never fire and don't get any errors. Any idea what's wrong with this?
thx

<!-- EDIT NOTES SECTION -->
<script>
    $('#editnote').on('hidden.bs.modal', function () {
        alert('hidden event fired!');
    });

    $('#editnote').on('shown.bs.modal', function () {
        alert('show event fired!');
    });
</script>

<div id="editnote" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
0
JElster
Asked:
JElster
  • 5
  • 3
1 Solution
 
GaryCommented:
How is the modal triggered? Attach the event to whatever element triggers it.
0
 
JElsterAuthor Commented:
bootstrap js.. that know this is modal...  it's a link like this that is clicked - opens the modal window

<a href='#editnote' data-toggle='modal'
0
 
GaryCommented:
Where you bind the dialog you can add your own functions for open/close

$( "#editnote" ).dialog({
close: function( event, ui ) { // add your code here }
open: function( event, ui ) { // add your code here }
});

Open in new window

0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
JElsterAuthor Commented:
I tried adding that.. doesn't do anything
nor this
   $('#editnote').on('shown.bs.modal', function () {
        alert('show event fired!');
    });
0
 
GaryCommented:
Do you have a live link
Just double checked your original code locally and it works fine.
0
 
GaryCommented:
Where is the above script located? Is it at the end of the page?
If not you need to wrap it in a document ready function
0
 
JElsterAuthor Commented:
Tried that.. still nothing and no JS errors..............?????????
0
 
GaryCommented:
Post all your code.
0
 
RobOwner (Aidellio)Commented:
Hi JElster,

You're sure you've included jquery in your project? All these bootstrap plugins require it

http://getbootstrap.com/javascript/#js-individual-compiled

Cheers,

Rob
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now