当用户单击页面上的不同链接时,我/我正在尝试使用 ajax 在引导模式上加载动态图像。每个链接都有一个数据 ID,用于在模态正文中显示其相关图像。它适用于前几个链接,但在点击 4-5 次后开始出现异常。稍后它会在单击链接时开始显示先前加载的图像,并在触发模态几秒钟后显示相关图像。任何人都可以帮助我我在下面的代码中做错了什么:
我的JS代码:
$(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');
});
});
});
我的模态 HTML 是:
<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>
而链接的 HTML 是:
<a href="#" data-toggle="modal" data-id="12345" class="viewPhoto" data-target="#viewPhotoModal">View Image</a>
您应该在 ajax 命令中使用 cache: false 。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句