javascript - Rails4 - why hidden.bs.modal is not firing? -

javascript - Rails4 - why hidden.bs.modal is not firing? -

i have bootstrap 3.3.1 in gemfile. did bundle install.

i have next in view

<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 grouping </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 , open, 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 info = $('#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 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>

the modal shows , closes perfectly. next not getting triggered.

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

and also

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

you need bind events show handler. in other words alter this:

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

to

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

javascript jquery ruby-on-rails twitter-bootstrap ruby-on-rails-4