Загрузка динамических изображений на модале начальной загрузки с помощью AJAX - PullRequest
0 голосов
/ 22 апреля 2019

Я пытаюсь загрузить динамические изображения на модале начальной загрузки с помощью ajax, когда пользователь нажимает на разные ссылки на странице. Каждая ссылка имеет 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>

А HTML-код ссылки:

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

1 Ответ

0 голосов
/ 22 апреля 2019

вы должны использовать cache: false в вашей команде ajax.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...