Проблема с отображением и скрытием Spinner на вызовах AJAX - PullRequest
Новая
       5

Проблема с отображением и скрытием Spinner на вызовах AJAX

0 голосов
/ 19 октября 2018

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

Layout 

<div class="container PAY">
     <div class="card-deck payment">
      <div class="card">
        <img class="card-img-top payment" src="{{asset('assets/images-new/mpesa.svg')}}" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title payment"><a href="#" id="mpesa" class="mpesa">Make Payment</a></h5>
        </div>
      </div>
<div class="modal" id="modal"><!-- Place at bottom of page --></div>
</div>

CSS 

.modal {
    display:    none;
    margin-top: 10%;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     400px;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../images/ajax-loader-2.gif') 
                50% 50% 
                no-repeat;
}

/*Make sure the modal class is hidden by default and we control the style using Js*/
.PAY.loading .modal {
    display:none;   
}

AJAX-вызовдобавить или удалить кнопку 

<script type="text/javascript">
  //Trigger button
$('.mpesa').on('click', function () {
    //Adds Class to the page when it loads
    ajaxStart: function() { #PAY.addClass("loading");    },
    $.ajax({
        //Contains controller of payment
        type: 'POST',
        url: 'paymentFinal',
        data: JSON.stringify(type),
        contentType: 'application/json',
        dataType: "json",
        success: function success(response) {
            console.log(response);
             //Removes class when the page loads
            ajaxStart: function() { #PAY.removeClass("loading");}
        },
        error: function error(data) {
            console.log(data);
        }
    });
});

</script>

1 Ответ

0 голосов
/ 19 октября 2018

Либо вы используете глобальные обработчики ajaxStart / ajaxStop, либо вы включаете / выключаете их для каждого запроса.

Вот один для запроса (вероятно, какЯ не проверял его на наличие дополнительных ошибок): 

$('.mpesa').on('click', function () {
    //Adds Class to the page when it loads
    $('.PAY').addClass("loading");

    $.ajax({
        //Contains controller of payment
        type: 'POST',
        url: 'paymentFinal',
        data: JSON.stringify(type),
        contentType: 'application/json',
        dataType: "json",
        success: function success(response) {
            console.log(response);

             //Removes class when the page loads
            $('.PAY').removeClass("loading");
        },
        error: function error(data) {
            console.log(data);
        }
    });
});

Это может сделать неправильную вещь, когда несколько запросов перекрываются, так что это лучше: 

// Do this once only, then forget about it
$(document)
  .ajaxStart(function() { $('.PAY').addClass("loading"); })
  .ajaxStop(function() { $('.PAY').removeClass("loading"); })

а затем в коде никогда не упоминайте .PAY, loading или ajaxStart никогда.

...