时间戳

首页 > 解决方案 > 在 AJAX 成功的引导模式中确认后隐藏卡片

javascript - 在 AJAX 成功的引导模式中确认后隐藏卡片

问题描述

我的删除页面包含多个带有删除按钮的帖子，当按下删除按钮时引导引导模式打开并要求确认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>

在模态中确认后如何隐藏卡片

标签： javascriptjquerybootstrap-4

解决方案

您的代码中的问题是，您的变量"that"不是指删除按钮，而是指对话框的确认按钮，因此您不能使用closest()函数。此时，您应该为您的卡片/删除按钮使用一些特定的标识。例如：

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

我在您的代码中没有看到的另一点是将数据变量（act、para、hash）传输到对话框确认按钮。例如，您的代码$(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您的删除按钮添加类。

希望能帮助到你。

推荐阅读