I have an example modal here:
<!-- Large Modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">funnycatnumberone</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-8 col-md-8">
<img src="cat1.JPG" class="img-responsive">
</div>
<div class="col-lg-4 col-md-4">
<p>brief description about my cat</p>
<ul class="list-unstyled">
<li>it has four legs</li>
<li>also a tail</li>
<li>likes boxes</li>
</ul>
</div>
<br>
</div>
<br>
<div class="row">
<div class="col-sm-2">
<img src="cat2.JPG" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="cat3.JPG" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="cat4.JPG" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="cat5.JPG" class="img-responsive">
</div>
</div>
</div>
<div class="modal-footer">
<a type="button" class="btn whateverclassimade" href="cutecatsmkay.php">check out some cats, yo</a>
<a type="button" class="btn whateverclassimade" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
When the modal opens, there is a title, a large picture (located on the left under the title), a brief description with some lines for added details, four pictures that are basically thumbnails directly under the main image, and some buttons to close the model or redirect the user to a different page.
Here's my question of sorts:
When a thumbnail (under the main image) is selected, I'd like that image to take the place of the larger image (aka take the main image stage). I appreciate the help!
try this:
$("#thumbnail1").click(function(){
$("#main_image").attr("scr", "source of image");
});
use id's corresponding to appropriate tag
Simple Pure Javascript would be
function imageSwap(catID) {
document.getElementById("largeCat").src = document.getElementById(catID).src;
};
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">funnycatnumberone</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-8 col-md-8">
<img id="largeCat" src="http://placekitten.com/g/500/600" class="img-responsive">
</div>
<div class="col-lg-4 col-md-4">
<p>brief description about my cat</p>
<ul class="list-unstyled">
<li>it has four legs</li>
<li>also a tail</li>
<li>likes boxes</li>
</ul>
</div>
<br>
</div>
<br>
<div class="row">
<div class="col-sm-2" onclick="imageSwap('smallCat1');">
<img id="smallCat1" src="http://placekitten.com/g/500/300" class="img-responsive">
</div>
<div class="col-sm-2" onclick="imageSwap('smallCat2');">
<img id="smallCat2" src="http://placekitten.com/g/500/400" class="img-responsive">
</div>
<div class="col-sm-2" onclick="imageSwap('smallCat3');">
<img id="smallCat3" src="http://placekitten.com/g/500/500" class="img-responsive">
</div>
<div class="col-sm-2" onclick="imageSwap('smallCat4');">
<img id="smallCat4" src="http://placekitten.com/g/500/600" class="img-responsive">
</div>
</div>
</div>
<div class="modal-footer">
<a type="button" class="btn whateverclassimade" href="cutecatsmkay.php">check out some cats, yo</a>
<a type="button" class="btn whateverclassimade" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
Related
I'm stuck with a problem. I Have Worked on images before in html but there never seemed to be a problem. I'm partially working on a project and I am giving the right path to the folder but the image is just not showing up. All the images had the same problem. Here is my code Snippet:
<div class="grid-col grid-col-12">
<div class="item-instructor bg-color-1">
<a href="page-profile.html" class="instructor-avatar">
<img src="UniLearn/UniLearn%20(with%20Options%20Panel)/img/saif.jpg" alt="">
</a>
<div class="info-box">
<h3>M Saifur Rahman</h3>
<span class="instructor-profession">Director,Business Development</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: black;">M Saifur Rahman</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-info">
<p>
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item-instructor bg-color-3">
<a href="page-profile.html" class="instructor-avatar">
<img src="http://placehold.it/210x220" alt="">
</a>
<div class="info-box">
<h3>Bijon Islam</h3>
<span class="instructor-profession">CEO</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal1">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: black;">Bijon Islam</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-info">
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-col grid-col-12">
<div class="item-instructor bg-color-2">
<a href="page-profile.html" class="instructor-avatar">
<img src="http://placehold.it/210x220" data-at2x="http://placehold.it/210x220" alt>
</a>
<div class="info-box">
<h3>Ivdad Ahmed Khan Mojlish</h3>
<span class="instructor-profession">Managing director</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal2">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: black;">Ivdad Ahmed Khan Mojlish</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-info">
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item-instructor bg-color-6">
<a href="page-profile.html" class="instructor-avatar">
<img src="http://placehold.it/210x220" data-at2x="http://placehold.it/210x220" alt>
</a>
<div class="info-box">
<h3>Zahedul Amin</h3>
<span class="instructor-profession">Directory,Finance & Strategy</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal3">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: black;">Zahedul Amin</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-image">
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My htdocs path is like this:
F:\xampp\htdocs\Main Files\UniLearn\UniLearn (with Options Panel)\img
Brother, i think the problem is in the paths, you have here 3 choices base on your HTML page location:-
if the .html file is in the same folder with the image your code should be like this:
<a href="page-profile.html" class="instructor-avatar">
<img src="saif.jpg" alt="">
</a>
(.html page beside saif.jpg)
if the .html file is in a folder contains the folder of the image your code should be like this:
<a href="page-profile.html" class="instructor-avatar">
<img src="UniLearn/UniLearn (with Options Panel)/img/saif1.jpg" alt="">
</a>
(.html page beside the folder UniLearn)
if the .html is in a different folder you need to jump up levels till you reach the nearest common folder and point to the image code should be like this:
<a href="page-profile.html" class="instructor-avatar">
<img src="../../UniLearn/UniLearn (with Options Panel)/img/saif2.jpg" alt="">
</a>
(.html is in a path two levels far from UniLearn)
-->(../..) Means go up two levels in the folder structure.
hope this helps
i think the problem is in your directory name spaces.
try to take picture from other directory then you will see what is the problem.
the problem is with the spacing. if you want to keep the naming (not recommended) and still use the image try this:
<img src="UniLearn/UniLearn%20(with%20Options%20Panel)/img/saif.jpg" alt="">
It is hard to tell with only this information.
Here's how to troubleshoot this:
First replace all spaces with %20 this is the way to url encode those characters.
If it still is a problem (normally browsers auto url encode), compare the URL you are using to access the website, the href in the base tag if there is one, and the url of the image. The browser will use those 3 together to figure out the final URL...
You can right click on the picture, and open in a new tab. It will allow you to rapidly see the URL that is used to point to the picture and allow you to make changes.
Also, since you are on a unix machine, the case is important. Make sure that all capitals should be present.
I have divs, for select div I used jquery-ui selectable, I want to click on the div(clicked div drawing) and the modal is opened.
HTML
<div class="content">
<div id="selectable" class="right-content">
<div id="selectable" class="clickable row">
<div class="col-lg-1 table-bordered">1</div>
<br/><br/>
<div class="col-lg-2 table-bordered">2</div>
<br/><br/>
<div class="col-lg-2 table-bordered">3</div>
<br/><br/>
<div class="col-lg-2 table-bordered">4</div>
<br/><br/>
<div class="col-lg-2 table-bordered">5</div>
<br/><br/>
<div class="col-lg-1 table-bordered">6</div>
</div>
<div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3>Order</h3>
</div>
<div id="orderDetails" class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
JavaScript
$( function() {
$("#selectable").selectable();
});
Although I have differentiated between the modals, only the first modal works but the second modal pops up the image for the first modal although the source image is that of the second modal. Can someone please assist me in sorting this issue out?
<div class="col-xs-6 col-md-3">
<div class="portfolio-item">
<img class="img-portfolio img-responsive" src="img/arnold200x200.png" data-toggle="modal" data-target="#modal1">
<div class="caption">
<h3>Amino X</h3>
<p>
GHS 200
</p>
</div>
</div>
</div>
<!-- Modal AminoX-->
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<a href="img/arnold.png" data-title="My First Caption" data-toggle="modal" />
<h4 class="modal-title">Amino X</h4>
</div>
<div class="modal-body">
<img src="img/arnold.png" width="350px" class="img-thumbnail" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="portfolio-item">
<img class="img-portfolio img-responsive" src="img/amino_x200x200.png" data-toggle="modal" data-target="#modal1" />
<div class="caption">
<h3>Amino X</h3>
<p>
GHS 200
</p>
</div>
</div>
</div>
<!-- Modal AminoX-->
<div class="modal fade" id="modal2">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<a href="img/amino_x200x200.png" data-title="My Second Caption" data-toggle="modal" />
<h4 class="modal-title">Amino X</h4>
</div>
<div class="modal-body">
<img src="img/aminoBig.png" width="350px" class="img-thumbnail" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal2">Close</button>
</div>
</div>
</div>
</div>
You reference modal1 in both links,update:
data-target="#modal2"
Fiddle
I have a photo shuffle grid, with this grid I can select a few theme's and it shows only the pictures of that theme.
Now I want to do the following, when I click on a image I want a modal to open. The problem I have is the following:
The first image (with a modal in the back) opens without problems, but the other pictures (with modals) do not open probably, I see them (half) but I can't click on them.
This is my code:
HTML
<ul class="portfolio-sorting list-inline text-center">
<li>All</li>
<li>Heren</li>
<li>Dames</li>
<li>jongens</li>
<li>meisjes</li>
<li>gemengd</li>
</ul>
<!--end portfolio sorting -->
<ul class="portfolio-items list-unstyled" id="grid">
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
<figure class="portfolio-item">
<button type="button" class="btn button_test" value="Heren1" data-toggle="modal" data-target="#heren1"> <img src="img/test.jpg" alt="Item 1" class="img-responsive">
<h2 class="teams">heren 1</h2>
</button>
<div class="modal fade bs-example-modal-lg" id="heren1" role="dialog" style="display: none;">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title black_tekst">Heren 1</h4>
</div>
<div class="modal-body">
<!--Tekst -->
<h2 class="black_tekst">Test </h2>
<p class="black_tekst">
<br>
<br> Team informatie
<br>
<br>
</p>
<h3 class="black_tekst">Test</h3>
<!--Einde tekst -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</figure>
</li>
<!--------------------------------------------------------------------------->
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
<figure class="portfolio-item">
<button type="button" class="btn button_test" value="Heren2" data-toggle="modal" data-target="#heren2"> <img src="img/test.jpg" alt="Item 1" class="img-responsive">
<h2 class="teams">heren 2</h2>
</button>
<div class="modal fade" id="heren2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</figure>
</li>
<!--------------------------------------------------------------------------------->
<!-- sizer -->
<li class="col-md-4 col-sm-4 col-xs-6 shuffle_sizer"></li>
</ul>
<!--end portfolio grid -->
CSS and JS you can find on https://jsfiddle.net/hrpj3j9t/2/
1) Bad code provided on jsfiddle - unclear, modernizr in js code section
2)From my point of view the best way is to generate code you need with jquery. In imageSrc I mean the real path to image.
This the small example of concept:
Place modal at the top:
<body>
<div class="modal" id="modal">
<img id="modalImage" src = "" alt="image">
...
</div>
...
<div class="elementOfGrid" data-image="imageSrc">
</body>
in js:
$('elementOfGrid').click(function(){
$('#modal #modalImage').attr({"src":$(this).data("image")});
$('#modal').modal("show");
}
another variant instead of setting attribute you can generate the whole html and use it like this:
$('#modal').html('');
var htmlRow = '<div class="modalImage"><img src="imageSrc"></div>';
$('#modal').html(htmlRow);
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>
<img src="{$user_img_url}/location.png" alt="">
{$eventDetails.event_details.location}
</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>
Invite Members
Delete Event
</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>Description</li>
<li>Feeds</li>
<li>Going</li>
<li>Maybe</li>
<li>Not Going</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.
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.