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.

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.

• javascript
• jquery
• twitter-bootstrap
• modal-dialog
• bootstrap-modal

• It's a delegated event handler assigned to the body element which is raised when a hidden.bs.modal event is triggered on the child .modal element. The event is triggered by the Bootstrap modal library – Rory McCrossan Commented Jan 5, 2016 at 13:09
• @RoryMcCrossan:But manually I'm no where calling the event hidde.bs.modal anywhere in my script. – PHPLover Commented Jan 5, 2016 at 13:11
• 1 As I said, it's raised from the Bootstrap modal library when the modal is hidden, either by clicking outside the modal or the close button. – Rory McCrossan Commented Jan 5, 2016 at 13:11
• @RoryMcCrossan : ok and what does the code lines $("#myModal-event .modal-body").html(' Loading... '); $(this).removeData('bs.modal'); do? – PHPLover Commented Jan 5, 2016 at 13:19
• The documentation contains all you need to know: api.jquery.com/removedata & api.jquery.com/html – Rory McCrossan Commented Jan 5, 2016 at 13:19

1 Answer 1

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.