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.