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

Question

I have bootstrap 3.3.1 in my gemfile. Did bundle install.

I have the following in my 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 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>

The modal shows and closes perfectly. But the following is not getting triggered.

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

and also

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

Answer 1

You need to bind those events to 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');