Using when() to Run Multiple Ajax Functions

Question

Using jQuery when(), I am trying to run multiple Ajax functions on a form submit, wait until they get their responses and when done, finally submit form. My code is:

$('form[name="regForm"]').on('submit', function( e ) {
    e.preventDefault();

    $.when( function () {
        ajaxOne();
        ajaxTwo();
        ajaxThree();
    }
    ).done(function() {
        $('form[name="regForm"]').unbind('submit').submit();
    });
});

The form gets submitted but the Ajax functions never trigger. What am I doing wrong? Thanks for any help.

is page reloading when submit occurs? Have you checked if above event gets triggered? Any errors in console? — charlietfl
– charlietfl, Commented Apr 10, 2017 at 19:04
The form does get submitted, but the Ajax functions don't get executed. — Rick Helston
– Rick Helston, Commented Apr 10, 2017 at 19:05
ajaxOne should return the promise resulting from the call. Please show the code for at least one of those functions. — Heretic Monkey
– Heretic Monkey, Commented Apr 10, 2017 at 19:08
provided an answer but still a mystery why your form is submitting since you prevent default...check console for errors and make sure form exists when you call this code — charlietfl
– charlietfl, Commented Apr 10, 2017 at 19:12

charlietfl · Accepted Answer · 2017-04-10 19:08:34Z

2

You have written $.when() incorrectly

Each ajax call promise should be an argument (or in jQuery 3+ can be array of promises)

$(function(){
    $('form[name="regForm"]').on('submit', function( e ) {
        e.preventDefault();

        $.when( ajaxOne(), ajaxTwo(),  ajaxThree()   
        ).done(function() {
            $('form[name="regForm"]').unbind('submit').submit();
        });
    });
});

This also assumes that form selector is correct and that each of the ajax functions returns a $.ajax promise something like

function ajaxOne()(
  return $.ajax({...})    
}

answered Apr 10, 2017 at 19:08

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

deostroll · Accepted Answer · 2017-04-10 19:09:58Z

0

You have to pass as arguments

$.when.apply($, arrayOfDefferds).done(doStuff);

Take care of getting the responses.

answered Apr 10, 2017 at 19:09

deostroll

12k22 gold badges94 silver badges168 bronze badges

Collectives™ on Stack Overflow

Using when() to Run Multiple Ajax Functions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related