dongyuandou2521 2019-04-22 17:39
浏览 136
已采纳

使用ajax在bootstrap模式上加载动态图像

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">&times; 
           </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:

<a href="#" data-toggle="modal" data-id="12345" class="viewPhoto" data-target="#viewPhotoModal">View Image</a>
  • 写回答

1条回答 默认 最新

  • duandu2159 2019-04-22 17:48
    关注

    you should use cache: false in your ajax command.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥500 亚马逊 COOKIE我如何才能实现 登录一个亚马逊账户 下发新 COOKIE ..我使用下发新COOKIE 导入ADS 指纹浏览器登录,我把账户密码 修改过后,原来下发新COOKIE 不会失效的方式
  • ¥20 玩游戏gpu和cpu利用率特别低,玩游戏卡顿
  • ¥25 oracle中的正则匹配
  • ¥15 关于#vscode#的问题:把软件卸载不会再出现蓝屏
  • ¥15 vimplus出现的错误
  • ¥15 usb无线网卡转typec口
  • ¥30 怎么使用AVL fire ESE软件自带的优化模式来优化设计Soot和NOx?
  • ¥15 Ubuntu20.04.4.LTS系统如何下载安装VirtualBox虚拟机?
  • ¥15 如何用QDomDocument读取内容为空格的xml数据
  • ¥15 请阅读下面代码,帮我修改下代码