Question

在使用json发送删除之前，我有这段代码用于显示引导程序4模态确认：

$(document).ready(function() {
    $('.launchConfirm').on('click', function (e) {
        $('#confirmDelete')
            .modal({ backdrop: 'static', keyboard: false })
            .one('click', '#delete', function (e) {
                $.ajax({
                    url:"../account/edit/profileimage",
                    type: "POST",
                    dataType:"json",
                    data:{"action": 'delete',"csrf_token": '<?= $this->e($Csrf_Token); ?>'},
                    success: function(data) {
                        if(data.status === 'error') {
                            $('#confirmDelete').animate({ scrollTop: $('#deleteError').offset().top }, 500);                             
                        } else {
                            alert('error found');
                        }
                    }
                });
        });
    });
});

html：

<div id="confirmDelete" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Delete Image</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12" style="">
                        <div id="deleteError" class="alert alert-danger"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
                <button type="button" data-dismiss="modal" class="btn">Cancel</button>
            </div>
        </div>
    </div>
</div>

现在正在执行，如果模式框中的php文件出现响应错误状态，我需要显示错误，但是单击删除按钮和响应错误后，模式框关闭并且在div中显示ID为{{1 }}。如何解决此问题？

Answer 1

防止默认点击事件

.one('click', '#delete', function (e) {
e.preventDefault();

并从删除按钮中删除data-dismiss="modal"

 <button type="button"  class="btn btn-primary" id="delete">Delete</button>

ps：我建议您不要内联事件

Answer 2

一个简单的方法是：-

使“删除”按钮复杂一些

<button type="button" class="btn btn-primary" id="delete">Delete</button>

^^^我们不需要直接从html切换模式。

在HTML中声明模态时，请附加此代码 data-backdrop="static" data-keyboard="false"

然后看起来像

<div id="confirmDelete" class="modal" role="dialog" data-backdrop="static" data-keyboard="false">

下一步，让我们在jquery中进行修改：-

$(document).ready(function() {
$('.launchConfirm').on('click', function(e) {
    //show modal
    $('#confirmDelete').modal('show');

    //modal delete click event
    $('#confirmDelete').on('click', '#delete', function(e) {
        //prevent button's default function
        e.preventdefault();

        //ajax call start
        $.ajax({
            url: "../account/edit/profileimage",
            type: "POST",
            dataType: "json",
            data: {
                "action": 'delete',
                "csrf_token": '<?= $this->e($Csrf_Token); ?>'
            },
            success: function(data) {
                if (data.status === 'error') {
                    // fade modal using ur code
                    $('#confirmDelete').animate({
                        scrollTop: $('#deleteError').offset().top
                    }, 500);
                } else {
                    alert('error found');
                }
            }
        });
    });
});

希望这会有所帮助

bootstrap 4在删除确认框中显示错误

2 个答案: