1
$('.form-dynamic').on('click', '.save-this-row', function(){
        var btn = $(this);
        var form = btn.parents('form').serialize();
        var depId = btn.parents('.for-clone').data('dep-id');
        var data = depId != undefined ? form + "&id=" + depId : form;
        var parentItem = $(this).parents('.item');

        $.ajax({
            url : '/settings/departments',
            method : 'POST',
            dataType : 'json',
            data : data,
            success : function(data){
                if(data.message == 'success'){
                    $('.validation-error').removeClass('validation-error');
                    btn.parents('.for-clone').attr('data-dep-id', data.id);
                    parentItem.removeClass("active");   
                    parentItem.addClass("edited");  
                }else{
                    $.each(data, function(key, value){
                        if(value != ''){
                            parentItem.find('.'+key).addClass('validation-error');
                        }else{
                            parentItem.find('.'+key).removeClass('validation-error');
                        }
                    });
                }
            }
        });
    });

введите сюда описание изображения

По кликаю посылаю запрос на сохранение данных в бд,приходит успешный ответ,после чего кнопка должна исчезнуть,но появляется так что она исчезает не сразу и в этот момент юзер еще кликов 5 может сделать по ошибке,не зная что еще не завершился запрос.Как реализовать ожидание пока все выполнится? разве success это не реализует?

2 ответа 2

1

Прячьте кнопку до вызова $.ajax

parentItem.removeClass("active"); // это что ли?
$.ajax({
  ...

и показывайте опять если надо

success : function(data){
  if(data.message == 'success'){
     ...
  }else{
    parentItem.addClass("active");
    ...
  }
},
error: function(jqXHR, textStatus, errorThrown){
    parentItem.addClass("active");
    ...
}

Другой подход:

var ajaxRunning = false;
$('.form-dynamic').on('click', '.save-this-row', function(){
  if (ajaxRunning)
    return;

  ...
  ajaxRunning = true;
  $.ajax({
    ...,
    complete: function(jqXHR, textStatus) {
      ajaxRunning = false;
    }
  });
});
6
  • Тогда будет получаеться так,жму кнопку валидация не прошла а кнопка уже спратяна,так не пойдет!
    – quaresma89
    10 фев 2016 в 21:34
  • Вы хотите узнать результат действия до того как это действие завершилось? Так не пойдет!
    – user176262
    10 фев 2016 в 21:36
  • Сперва интересует вопрос почему ответ уже пришел от запроса,а действие все еще не выполнилось,с чем это связано
    – quaresma89
    10 фев 2016 в 21:41
  • Какое действие? Такое чувство, что Вы не совсем правильно интерпретируете то, что происходит. "Ответ пришел" - это начал выполняться обработчик success?
    – user176262
    10 фев 2016 в 21:44
  • @quaresma89, вы уверены, что ответ пришел? Ajax-запрос не выполняется моментально. 10 фев 2016 в 21:45
1

Вы можете перед отправкой ajax-запроса делать кнопку неактивной:

btn.prop('disabled', true);

А если запрос вернул ошибку, возвращаете активность кнопке:

btn.prop('disabled', false);
1
  • Вот так и попробую спасибо
    – quaresma89
    10 фев 2016 в 21:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.