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

Posted

技术标签:

【中文标题】使用 ajax 在引导模式上加载动态图像【英文标题】:Loading dynamic images on an bootstrap modal with ajax 【发布时间】:2019-09-11 21:22:32 【问题描述】:

当用户单击页面上的不同链接时,我/m 尝试。每个链接都有一个 data-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">&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>

Link的HTML是:

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

【问题讨论】:

【参考方案1】:

你应该在你的 ajax 命令中使用 cache: false。

【讨论】:

你应该阅读这个部分:api.jquery.com/data/#data-html5 - 我会尝试使用另一个属性。或 attr('data-id'); Andreas Otterstein,感谢您让我尝试不同的方式。实际上我发现问题不在我的代码中,这是因为我的主 js 文件在同一页面中包含了两次。一旦我摆脱了其中一个,它就像一种魅力..

以上是关于使用 ajax 在引导模式上加载动态图像的主要内容,如果未能解决你的问题,请参考以下文章

为啥在 MVC 3 中使用 ajax 动态加载表只能在兼容模式下工作?

JCrop 与下载的动态图像集成

使用 ajax json 加载数据后,引导数据表无法正常工作

重建模式列表

将动态数据传递给引导模式

将动态数据传递给引导模式