Как скрыть модальное состояние ошибки при использовании Ajax? - PullRequest
Новая
       50

Как скрыть модальное состояние ошибки при использовании Ajax?

1 голос
/ 10 ноября 2019

Как показано на картинке ниже, у меня появляется модальное сообщение об ошибке, однако модальное окно спереди не скрывается. Я уже записываю последовательность, чтобы сначала скрыть ход загрузки, а затем - ошибку.

По последовательности за ошибку:

  1. Скрыть способ выполнения загрузки (серая рамка с кружком)
  2. Ошибка отображения модальная (красная рамка)

enter image description here

HTML 

<div class="modal fade" id="error-upload" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content bg-danger text-white">
            <div class="modal-body text-center">
                <h3 class="text-white mb-15"><i class="fa fa-exclamation-triangle"></i> ERROR!</h3>
                <span>Upload Failed.</span>
                <p>Filename already exist.</p>
                <p></p>
                <button type="button" class="btn btn-light" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="uploading-modal" tabindex="-1" role="dialog" aria-labelledby="uploadingLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="loader"></div>
                <div class="loader-txt">
                    <p>Please wait while file is Uploading.</p>
                </div>
            </div>
        </div>
    </div>
</div>

JS 

$("#btnYes").on("click",function(e){
    e.preventDefault();
    $.ajax({
        url: 'example.com'
        type: 'POST',
        data: fd,
        xhrFields: {
            withCredentials: true
            },
        contentType: false,
        processData: false,
        beforeSend: function(){
            $("#uploading-modal").modal({
                backdrop: "static", //remove ability to close modal with click
                keyboard: false, //remove option to close with keyboard
                show: true //Display loader!
            });
        },
        success: function(response){
            console.log(response);
            if(response != 0){
                $('#success-modal').modal('show');
            }else{
                alert('File Format Not Supported');
            }
            $("#uploading-modal").modal("hide");
        },
        error: function(e){
            console.log(e);
            $("#uploading-modal").modal("hide");
            $("#error-upload").modal('show');
        },
    });
});
...