загрузчик 4 показывает ошибку в окне подтверждения удаления - PullRequest
Новая
       8

загрузчик 4 показывает ошибку в окне подтверждения удаления

0 голосов
/ 20 ноября 2018

У меня есть этот код для модального подтверждения show bootstrap 4 перед отправкой удалить с помощью 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>

Сейчас в действии, мне нужно показать ошибкуесли статус ошибки ответа из php файла в модальном окне Но после нажатия кнопки удаления и ошибки ответа модальное поле закрывается и не показывает ошибку в div с идентификатором deleteError.как решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

простой способ сделать это: -

сделать кнопку удаления чуть менее сложной

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

^^^ нам не нужнопереключить модальный напрямую из html.

при объявлении вашего модального в HTML pls добавьте этот код 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');
                }
            }
        });
    });
});

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

0 голосов
/ 20 ноября 2018

Предотвращение события щелчка по умолчанию 

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

и удаление data-dismiss="modal" из кнопки удаления 

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

ps: я предлагаю вам не включать свои события

...