-1

I am trying to run an ajax function after the modal show event in JQuery. However I am not able to get JQuery to detect the show event after the modal opens. There are a few examples online but for some reason, they are not working in my environment - neither are they throwing an error. It just does not do anything.

HTML Code:

<div id="md-load-test-modal" tabindex="-1" role="dialog" class="modal fade colored-header colored-header-primary">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" data-dismiss="modal" aria-hidden="true" class="close"><span class="mdi mdi-close"></span></button>
                        <h3 class="modal-title">{{modal-heading}}</h3>
                      </div>
                      <div class="modal-body">
                        <p>{{modal-content}}</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                      </div>
                    </div>
                  </div>
                </div>

Modal called via:

<a href="#" class="btn-default" data-toggle="modal" data-target="#md-load-test-modal">Show Modal</a>

JQuery options I have tried

$(document).on('show','#md-load-test-modal',function(){
          console.log('Modal opened');
      });

$('#md-load-test-modal').on('show',function(){
          console.log('Modal opened');
      });

$('#md-load-test-modal').bind('show',function(){
          console.log('Modal opened');
      });

$('#md-load-test-modal').on('show',function(){
          console.log('Modal opened');
      });

The references I have seen online: jQuery change event issue after show()

jQuery event to trigger action when a div is made visible

https://jsfiddle.net/ednon5d1/

The one that finally made me think differently:

Twitter Bootstrap .on('show',function(){}); not working for popover

Community
  • 1
  • 1
alpharomeo
  • 418
  • 5
  • 13

1 Answers1

2

As I was typing the question I thought of trying something else based on a comment made in another SO answer (Link: )

The reason it was not recognising the modal open event is because I was using on('show',......) it should be on('show.bs.modal',......

I dont know why or how the other examples work without this but this helped me - should help somebody else as well.

EDIT: Enhancing the answer to include sample code:

$(document).on('show.bs.modal','#md-load-test-modal',function(){
          console.log('Modal opened');
      });
alpharomeo
  • 418
  • 5
  • 13