bootstrap 4 show error in delete confirm box

Question

I have this code for show bootstrap 4 modal confirm before send delete using json:

$(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>

Now in action, I need to show error if response error status from php file in the modal box But after click delete button and response error, modal box close and not show error in div with id deleteError. how do fix this problem?

Answer 1

a simple way to do this is: -

make the delete button a little less complex

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

^^^ we don't need to toggle modal directly from html.

while declaring your modal in HTML pls append this code data-backdrop="static" data-keyboard="false"

then it looks like

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

NEXT, let's make modifications in 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');
                }
            }
        });
    });
});

hope this helps

Answer 2

Prevent the default click event

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

and remove the data-dismiss="modal" form the delete button

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

ps: i suggest you don't inline your events