Обновите модал с помощью AJAX-запроса и ожидайте

Question

У меня есть базовая функция jQuery с AJAX. При нажатии кнопки выполняется вызов AJAX, и в случае успеха HTML-код модала устанавливается на ответ.

Код работает нормально, но проблема, с которой я сталкиваюсь, заключается в том, что, когда модал запускается во второй раз. Он отображает содержимое HTML предыдущего вызова AJAX, а затем изменяется сразу после 1-2. Поэтому мне кажется, что метод show вызывается до того, как HTML-код полностью настроен на ответ.

Текущий код

$(document).ready(function () {
    $('body').on('click',
        '.show-quickview',
        function() {
            $.ajax({
                type: "GET",
                url: '/Product/Index',
                data: {
                    slug: this.id,
                    type: this.name,
                },
                success: function(response) {
                    $("#quickviewModal").html(response);                        
                    $('#quickviewModal').modal('show');
                }
            });
        });


});

Я пытался поставить шоу в полном объеме, и я все еще получаю тот же ответ.

$(document).ready(function () {
    $('body').on('click',
        '.show-quickview',
        function() {
            $.ajax({
                type: "GET",
                url: '/Product/Index',
                data: {
                    slug: this.id,
                    type: this.name,
                },
                success: function(response) {
                    $("#quickviewModal").html(response);
                },
                complete: function(response) {
                    $('#quickviewModal').modal('show');
                }
            });
        });


});

Могу ли я спросить, как заставить quickviewModel показываться только после того, как он полностью установил ответ AJAX.

Answer 1

Может быть, вы могли бы попробовать это:

$.ajax({
    type: "GET",
    url: '/Product/Index',
    data: {
        slug: this.id,
        type: this.name,
    },
    beforeSend: function() {
        $("#quickviewModal").html("");
    },
    success: function(response) {
        $("#quickviewModal").html(response);
        $('#quickviewModal').modal('show');
    },
    complete: function(response) {
    }
});

Более подробную информацию о состоянии jQuery вы можете найти здесь: http://api.jquery.com/jquery.ajax/