Скрыть карту после подтверждения в bootstrap модально при AJAX успехе

Question

Моя страница удаления содержит несколько сообщений с кнопкой удаления, когда нажата кнопка удаления bootstrap bootstrap модальный открывается и будет запрашивать подтверждение are you sure you want to delete post ? YES : NO

при нажатии кнопки YES .click(function (e){....} отправляет AJAX запрос в базу данных, если ajax возвращает success, что патентованная карта должна быть скрыта

, поэтому я попытался использовать следующий код

    $(document).ready(function () {
            $("#confirm").click(function (e) {

                e.preventDefault();
                var that = this;

                const act = $(this).attr('data-act');
                const para = $(this).attr('data-para');
                const hash = $(this).attr('data-hash');
                $.ajax({
                    url: '/include/ajax/mark_sold.php', // Call delete.php to update the database
                    method: 'POST',
                    data: {action: act, para: para, hash: hash},
                    cache: false,
                    success: function (data, status) {
                        $("#fetched").html(data);
                        $('#myModal').modal('hide');
                         $(that).closest('div.card').hide();  //to hide div after ajax success
                    },
                    error: function (xhr, statusText, error) {
                        $("#fetched").show();
                        $("#confirmButton").hide();
                    }
                });
            });
            return false;
        });

HTML

<div class="card border-0 small col-lg-3 col-md-2 col-6 mb-2 px-1">
  <img class="card-img-top rounded-0" src="/upload/" alt="Card image cap">
<div class="card-body pb-0 pt-2 px-0">
    <h6 class="card-title text-dark text-truncate">title</h6>
</div>

<button data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-sm modalopen"    data-hash="6d8ce77d206011027297b693be999704" data-para="A4IxzuRP8ATv">delete</button>
</div>

Как скрыть карту после подтверждения в модальном

Answer 1

Проблема в вашем коде в том, что ваша переменная "that" относится не к кнопке удаления, а к кнопке подтверждения в диалоговом окне, поэтому вы не можете использовать функцию closest(). На этом этапе вы должны использовать определенную c идентификацию для вашей карты / кнопку удаления. Например:

$('button[data-hash="'+hash+'"]') .closest('div.card').hide();

Еще один момент, который я не вижу в вашем коде, - это передача переменных данных (act, para, ha sh) на кнопку подтверждения диалога. Например, ваш код $(this).attr('data-hash') не может достичь значения с помощью кнопки удаления, поскольку $(this) ссылается на кнопку подтверждения диалога. Решением этой проблемы является передача уникального идентификатора диалоговой кнопке.

$(".deleteBtn").on('click',function(){ //Add on click event to all delete buttons
    $("#confirm").data("hash",$(this).data("hash")); //Pass hash value to dialog confirm button
});

$("#confirm").click(function (e) {
    e.preventDefault();

    var delBtn = $('button[data-hash="'+$(this).data("hash")+'"]'); //Get specific delete button element by passed hash value

    const act = delBtn.attr('data-act'); //Get data variables from the delete button element
    const para = delBtn.attr('data-para');
    const hash = $(this).data("hash");
    $.ajax({
        url: '/include/ajax/mark_sold.php',
        method: 'POST',
        data: {action: act, para: para, hash: hash},
        cache: false,
        success: function (data, status) {
            $("#fetched").html(data);
            $('#myModal').modal('hide');
            delBtn.closest('div.card').hide();  //Find closest .card element to the specified delete button
        },
        error: function (xhr, statusText, error) {
            $("#fetched").show();
            $("#confirmButton").hide();
        }
    });
});

Не забудьте добавить класс .deleteBtn к кнопкам удаления.

Надеюсь, это поможет.