Плагин jQuery Form представляет несколько форм, но дожидается до тех пор, пока не закончится предыдущее

Question

Пользователи могут добавлять новые формы, которые все отправляются одним нажатием кнопки и «плагин jQuery Form». Чтобы представить каждую форму, я перебираю формы, которые имеют определенный класс.

Поскольку пользователи могут отправлять изображения, а сервер должен выполнять некоторую работу с каждым изображением, я хотел бы подождать, пока предыдущая отправка не завершится с успешным статусомText. В настоящее время (я просто делаю паузу 2000 года, которая является не более чем «хакерским» решением.)

Я думаю, что могу использовать функцию успеха для этого, но не знаю, как я соединяю свою петлю отправки с возвращенным состоянием statusText. Вот fiddle. Вот что у меня есть:

var userform = '<form class="myForm" action="up.php" method="post"> ' + 
         'Name: <input type="text" name="name" />' + 
         'file: <input type="file" name="img[]" multiple />' + 
         'Comment: <textarea name="comment"></textarea>' + 
         '<input type="submit" value="Submit Comment" />' + 
        '</form>'; 


    function showResponse(responseText, statusText, xhr, form) { 
     if (statusText === "success") { 
      console.log("the submit ended with success"); 
      //submit next form should happen 
     } 
    } 

    var options = { 
     success: showResponse 
    }; 

    $('#add').click(function() { 
     $(userform).appendTo('.append').each(function() { 
      $('.myForm').ajaxForm(options); 
     }); 
    }); 


    $("#all").click(function() { 
    var collection = $('.myForm'); 
    if (collection.length > 0) { 
     var i = 0; 
     var fn = function() { 
      var element = $(collection[i]); 
      $(element).submit().addClass('done').hide("slow"); 
      if (++i < collection.length) { 
       setTimeout(fn, 2000); 
      } 
     }; 
     fn(); 
    } 
    }); 

Спасибо!

Answer 1

Обработчик отправки просто выполняет STD POST/GET, поэтому вы не получите ответ. Вы будете хотеть, чтобы изменить код, чтобы использовать Ajax и затем сервер возвращает ответ success = true/false или что вы предпочитаете

https://jsfiddle.net/mj9dbLh1/3/

Изменить этот ...

var element = $(collection[i]); 
$(element).submit().addClass('done').hide("slow"); 
if (++i < collection.length) { 
    setTimeout(fn, 2000); 
} 

к чему-то вроде ...

var element = $(collection[i]); 
$(element).addClass('done').hide("slow"); 
$.post("ajax/test.html", function(data) { 
    fn(); // DO SUCCESS ACTION HERE 
}); 

Имейте в виду, что это будет на них каждый успех, так что вы можете сначала получить подсчет количества форм (ВГ ich дает вам количество вызовов ajax). Затем увеличивайте счетчик для каждого действия успеха. Как только вы получите свою сумму, вы сможете отобразить ВСЕ УСПЕХ.

Взгляните на эти документы, чтобы узнать больше о том, как обращаться с ошибками, а что нет. http://api.jquery.com/jquery.post/