Rails4 - why doesn't hidden.bs.modal shoot?

Question

I have bootstrap 3.3.1 in my gemfile. Installed the package.

I have the following in my opinion

<div class="row text-center"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://apis.google.com/js/platform.js" async defer></script> <button type="button" class="btn mybtn-primary" data-toggle="modal" data-target="#myModal"> Start Practice Group </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Select Language</h4> </div> <div class="modal-body"> <button type="button" class="btn" data-dismiss="modal">Close</button> <button type="button" class="btn" id="submit_form">Submit</button> <!--<div class='modal-body1'>--> <!-- <h3>Close and open, I will be gone!</h3>--> <!--</div>--> </div> <div class="modal-body2"> <div id="placeholder-div1"> </div> </div> <div class="modal-footer"> </div> <script type="text/javascript"> var render_button = function() { var data = $('#lang').val() + " " + $('#level').val(); console.log(data); gapi.hangout.render('placeholder-div1', { 'render': 'createhangout', 'initial_apps': [{'app_id' : '1097853', 'start_data' : $('#lang').val() + " " + $('#level').val(), 'app_type' : 'ROOM_APP' }] }); } $(function(){ $('#submit_form').click(function(){ console.log("Submitted"); render_button(); }); }); // $(function(){ // $('#myModal').on('hidden.bs.modal', function (e) { // console.log("Modal hidden"); // $("#placeholder-div1").html(" "); // }); // }); $(document).ready(function() { console.log("Document Loaded"); $('#myModal').on("hidden.bs.modal", function() { console.log("Modal hidden"); $(".modal-body1").html("Where did he go?!?!?!"); }); }); $(document).ready(function() { $('#myModal').on('hidden.bs.modal', function () { alert('hidden event fired!'); }); $('#myModal').on('shown.bs.modal', function () { alert('show event fired!'); }); }); </script> </div> </div> </div> </div> 

Modal shows close beautifully. But the following does not start.

  $('#myModal').on("hidden.bs.modal", function() { console.log("Modal hidden"); $(".modal-body1").html("Where did he go?!?!?!"); }); 

and

 alert('hidden event fired!'); alert('show event fired!'); 

Answer 1

You need to associate these events with the show handler. In other words, change this:

 $('#myModal').on("hidden.bs.modal", function() { console.log("Modal hidden"); $(".modal-body1").html("Where did he go?!?!?!"); }); 

to

 $('#myModal').on("hidden.bs.modal", function() { console.log("Modal hidden"); $(".modal-body1").html("Where did he go?!?!?!"); }).modal('show');