Как я предотвращаю представление формы, пока несколько вызовов ajax не закончились? jQuery

Вы можете просто установить объект JS с несколькими свойствами для каждого вызова ajax. Пример:

var requiredCalls = {call1: false, call2: false, call3: false}

В цикле отправки формы каждое свойство проверяется на истинность. Если какие-либо из них неверны, не отправляйте форму.

По завершении каждого вызова ajax установите для его свойства (call1, call2 и т. Д.) Значение true.

Это один из способов, лучший ли он, я не знаю.

Вы можете добавить обработчик события для события submit формы. Обработчик события может проверять, разрешено ли отправление формы, и прерывать его, если нет. Вот некоторые документы: http://api.jquery.com/submit/

Обратите внимание, что если javascript на странице вызовет .click() на одной из кнопок отправки формы, форма будет отправлена без вызова обработчика .submit(). Это странная проблема jQuery (http://groups.google.com/group/jquery-en/browse_thread/thread/1317bfd4e3a8b233?pli=1), которую, я полагаю, специалисты jQuery не считают ошибкой. Возможно, есть и другие подобные случаи, но я надеюсь, что нет.

Если вы используете ASP.NET, в зависимости от того, что находится на форме, ASP.NET может внедрить функцию "__doPostBack". Вам может понадобиться подключить эту функцию, переопределив ее с помощью пользовательского кода, который вызывает оригинал.

Как насчет создания глобальной переменной:

  var i = 0;

и каждый вызов AJAX увеличивает эту переменную в начале вызова и уменьшает ее по завершении.

При отправке формы проверьте, больше ли эта переменная, чем 0, и предотвратите отправку.

  function submitForm(){
      return i == 0;
  }

<form onsubmit="submitForm()"....>

</form>

Думаю, у вас есть такой код:

var form = $(...);
form.bind ('submit', function (...) {
  $.ajax (
    ...,
    complete: function (...) {
      // do something
    }
  );
}

вы можете это сделать:

var form = $(...);
form.bind ('submit', function (...) {
  if ($ (this).data ('inprogress') === null) {
    $ (this).data ('inprogress', 1);
    // disable submit button
    $.ajax (
      ...,
      complete: function (...) {
        // do something
        $ (this).data ('inprogress', null)
        // enable submit button
      }
    );
  } else {
    // display notification / warning
  }
}

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

Не знаю, совпадение ли это, но все люди, которым удалось отправить его, использовали Safari на Mac.

Вот метод, который я использую, было бы здорово, если бы кто-нибудь мог обнаружить изъян в логике.

Используя предложение Винсента:

// set this to zero before any ajax calls are made  
var ajaxcallcounter = 0;

тогда, когда я, например, выполняю вызов ajax:

    // UPDATE SHIPPING BOXES
    var data = 'pickup=1';
    ajaxcallcounter++;
    $.ajax({
    type: "POST",
    url: "incViewbasketShippingBoxes.php", 
    data: data,
    success: function(response) {
        $('#shippingBoxes').html(response);
            ajaxcallcounter--;
    }
    });

Это работает нормально, у меня также есть небольшой симпатичный скрипт для обратной связи с пользователем - кнопка неактивна, пока ожидает ответа ajaxcounters и если это занимает больше 250 мс, также отображается анимация. После завершения всех вызовов ajax счетчик возвращается к нулю, и кнопка отображается как обычно:

// when ajaxStart is triggered, keep an eye on the ajaxcallcounter
$(document).ajaxStart(function() {
  $(".ajaxbutton").attr("disabled", "disabled");
  $('#processingAlert').html(' ...calculating');
  $('#processingAlert').show();

  // if it's taken longer than 250ms (say) display waiting message
  timer = setTimeout(function() {
    $('#processingAlert').html(' ...calculating <img src="../gfx-site/ajax-loader.gif">');
  }, 250);
});
// when ajaxComplete is triggered, keep an eye on the ajaxcallcounter
$(document).ajaxComplete(function() {
    if (ajaxcallcounter == 0) {
        $(".ajaxbutton").removeAttr("disabled");
        $('#processingAlert').hide();
        // cancel showing the message when the ajax call completes.
    clearTimeout(timer);
    }
});

Наконец, мы переходим к функции, которая должна предотвращать отправку, но, похоже, не работает :

// can we submit yet?
  $('#checkoutform').submit(function() {
    if (ajaxcallcounter == 0) {
      return true;
    }
    return false;
  });

Кто-нибудь может заметить, что я здесь сделал не так?

Спасибо!