What does the code $('body').on('hidden.bs.modal', '.modal', function (){....} do and when does it gets called?

Question

I've following HTML to show the bootstrap modal dialog:

<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>

Bootstrap modal dialog code is as below :

<div id="myModal-event" class="modal fade" role="dialog">
  <!-- <div role="document" class="modal-dialog"> -->
  <div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
    <div class="modal-content" style="border:0;">
      <!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true"> x </span></button> -->
      <div class="modal-header">
        <h4 id="myModalLabel" class="modal-title">Event Details</h4>
      </div>
      <div class="modal-body"> Loading... </div>
      <div class="modal-footer">
       <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
      </div>
    </div>    
    <!-- /.modal-content -->
  </div>
</div>

and another code as follows :

<div class="modal-content">
  <!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button> -->
  <div class="modal-header">
    <h4 id="myModalLabel" class="modal-title">Event Details</h4>
  </div>
  <div class="modal-body">
    <div class="row">
      <div class="col-sm-6 col-md-6 col-sm-12">
        <div class="event-title">
        {$eventDetails.event_details.title}
        <input type="hidden" name="hid_event_id" id="hid_event_id" value="{$eventDetails.event_details.event_id}">
        </div>
        <ul>
          <li><img src="{$user_img_url}/time.png" alt=""> {$eventDetails.event_details.start_time_phrase_stamp}</li>
          <li><img src="{$user_img_url}/calender.png" alt=""> {$eventDetails.event_details.start_time_phrase}</li>
          {if $eventDetails.event_details.location}
            <li>
                <a href="javascript:void(0)" onClick="viewLocationOnMap();"> <img src="{$user_img_url}/location.png" alt=""></a>
              <a href="javascript:void(0)" onClick="viewLocationOnMap();">{$eventDetails.event_details.location}</a>
            </li>
          {/if}
          {if $eventDetails.event_details.group_name}
          <li><img src="{$user_img_url}/group_event.png" alt="">Group: {$eventDetails.event_details.group_name}</li>
          {/if}
          <li><button type="button" class="btn btn-info" data-toggle="popover">Edit Event</button></li>
        </ul>
        <ul id="popover-content" class="list-group" style="display: none">
  <a data-toggle="modal" href="ajax_event_detail.php?event_id={$eventDetails.event_details.event_id}" data-target="#myModal-edit-event" style="cursor: pointer;" class="list-group-item">Edit Event</a>
  <a href="#" class="list-group-item">Invite Members</a>
  <a href="#" class="list-group-item">Delete Event</a>
</ul>
      </div>
      <div class="col-sm-6 col-md-6 col-sm-12">
        <div class="form-group" align="right">
          <select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;" >
            <option value="0">I am..</option>
            <option value="1" {if $myEventGoingStatus eq 'attending_user'} selected="selected" {/if} >Going</option>
            <option value="2" {if $myEventGoingStatus eq 'mayBeAttending_user'} selected="selected" {/if} >Maybe</option>
            <option value="3" {if $myEventGoingStatus eq 'notComing_user'} selected="selected" {/if}>Not Going</option>
          </select>
        </div>
        <!--
        <div class="form-group" align="right">
          <select name="event_actions" id="event_actions" class="form-control" style="width:150px;">
            <option value=""></option>
            <option value="edit_event">Edit Event</option>
            <option value="invite_members">Invite members</option>
            <option value="delete_event">Delete event</option>
          </select>
        </div>
        -->
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="event-menu">
        <ul class="nav nav-tabs" id="myTab">
            <li><a href="#description" data-toggle="tab">Description</a></li>
            <li><a href="#feeds" data-toggle="tab">Feeds</a></li>
            <li><a href="#going" data-toggle="tab">Going</a></li>
            <li><a href="#maybe" data-toggle="tab">Maybe</a></li>
            <li><a href="#notgoing" data-toggle="tab">Not Going</a></li>
          </ul>
      </div>
    </div>
    <hr>

    <div class="tab-content">
    <div class="tab-pane active" id="description">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
          {$eventDetails.event_details.description}
      </div>
    </div>
    </div>

    <div class="tab-pane" id="feeds">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
       Work In Progress
       </div>
    </div>
    </div>

    <div class="tab-pane" id="going">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">

        {foreach from=$eventDetails.attending_user item=eachUser key=key}
        <div class="col-md-2 col-sm-2 col-xs-12 no-padding">
          <div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
            <span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
            <span class="degree">{$eachUser.group_name}</span> </div>
        </div>
        {/foreach}

      </div>
    </div>
    </div>

    <div class="tab-pane" id="maybe">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">

        {foreach from=$eventDetails.mayBeAttending_user item=eachUser key=key}
        <div class="col-md-2 col-sm-2 col-xs-12 no-padding">
          <div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
            <span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
            <span class="degree">{$eachUser.group_name}</span> </div>
        </div>
        {/foreach}

      </div>
    </div>
    </div>    

    <div class="tab-pane" id="notgoing">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">

        {foreach from=$eventDetails.notComing_user item=eachUser key=key}
        <div class="col-md-2 col-sm-2 col-xs-12 no-padding">
          <div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
            <span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
            <span class="degree">{$eachUser.group_name}</span> </div>
        </div>
        {/foreach}

      </div>
    </div>
    </div>    
    </div>    
  </div>
  <div class="modal-footer">
    <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
  </div>
</div>

Now what's happening in my code is when user clicks on above

<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>

The first part of code opens up, then the data fetch is going on then suddenly the second part of code i.e. the data fetched gets added to the modal. I'm not understanding how this is happening.

The jQuery which is doing this is as follows but I didn't understand what it is doing when that hide event is being called etc. etc. Please clear my doubts by making me understand below code.

$('body').on('hidden.bs.modal', '.modal', function () {
    console.log('Hi *');
    $("#myModal-event .modal-body").html(' Loading... ');
    $(this).removeData('bs.modal');

});

Thanks.

Solution

This executes when the .modal (modal window) gets closed. So, whenever you open a modal window with the class modal (obviously), at some point it gets closed. When that modal window gets hidden (or closed) the event hidden.bs.modal gets triggered and the function gets executed.

This is not managed by the user (you didn't write explicit code) but the Bootstrap library has it built in.

From the Bootstrap Documentation:

hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Sample Code:

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something when this modal window is closed...
});

To answer the queries in the comments, you have:

• $("#myModal-event .modal-body").html(' Loading... '); sets the content of the modal window to be Loading....
• $(this).removeData('bs.modal'); - This tells Bootstrap to clear everything on the close of the modal window, so you won't get cached content. See more at Clear Bootstrap Modal content after close.

Comments

[PHPFan]

ok and what does the code lines $("#myModal-event .modal-body").html(' Loading... '); $(this).removeData('bs.modal'); do?

[Praveen Kumar Purushothaman]

$("#myModal-event .modal-body").html(' Loading... '); sets the content of the modal window to be Loading....

[Praveen Kumar Purushothaman]

$(this).removeData('bs.modal'); - See more at Clear Bootstrap Modal content after close.

[Praveen Kumar Purushothaman]

@user2839497 I have updated the questions and answers in my answer.

[PHPFan]

$('body').on('hidden.bs.modal', '.modal', function () In this code what does the "body" mean? It's the html <body> tag or the Botstrap Modal's body?

[Praveen Kumar Purushothaman]

It is on '.modal' not on 'body'. It has been delegated. Kindly check out: learn.jquery.com/events/event-delegation

[PHPFan]

You mean to say it has nothing to do with HTML's <body> tag, it's entirely related to <div> element "body" on bootstrap modal. Am I right?