Loading dynamic images on an bootstrap modal with ajax - php

Question

I/m trying to load dynamic images on a bootstrap modal with ajax when a user clicks on different links on a page. Each link has an data-id that is used to show its relevant image in the modal body. It works fine for the first couple of links but starts to misbehave after 4-5 clicks. Later it starts showing previously loaded images when a link is clicked and the relevant image is shown after several seconds of the modal being triggered. Can anyone help me what I'm doing wrong with my code below:
My JS Code:
$(document).ready(function(){
$(document).on('click', '.viewPhoto', function(e){
e.preventDefault();
var pid = $(this).data('id'); // it will get id of clicked row
$("#photoContent").html("Please Wait...");
$.ajax({
url: "URL OF PAGE",
type: 'POST',
data: 'pid='+pid,
})
.done(function(data){
$('#photoContent').html(data); // load response
})
.fail(function(){
$('#photoContent ').html('Error');
});
});
});
And my modal HTML is:
<div id="viewPhotoModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body" id="photoContent"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And the HTML of Link is:
View Image

Answer 1

you should use cache: false in your ajax command.