JQuery deferred with .each()

Question

Any ideas how you might use JQuery's deferred methods with a function that detects all changed forms and submits each one as an Ajax post?

I can get the same thing working if I just list a load of form submissions but if I use...

$('form.changed').each(function(){
  return $(this).submitWithAjax();
});

A fuller version of the code that I'm trying to get working is here... at JS Fiddle

Thanks in advance!

Could you clarify your question? I'm not sure I understand (but I'm pretty sure my answer is off base ...) — Pointy
– Pointy, Commented May 28, 2011 at 16:54

Pointy · Accepted Answer · 2011-05-28 16:53:57Z

17

Instead of ".each()", use ".map()":

var deferreds = $('form.changed').map(function(i, elem) {
  return $(this).submitWithAjax();
});

$.when.apply(null, deferreds.get()).then(function() { ... });

The "$.when()" thing lets you bundle up a bunch of deferred objects and wait for all of them to succeed (or for any to fail — note the difference there). It normally allows an arbitrary number of arguments, but since we've got an array I used "apply()".

Note that I've only used this stuff lightly, so read the jQuery API docs to double check :-) edit — also upon re-reading your question, I may have misunderstood you.

edited May 28, 2011 at 16:53

answered May 28, 2011 at 16:40

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

2 Comments

Kevin Monk Over a year ago

This works perfectly. Thanks for your help. Just trying to understand why it works now.

Pointy Over a year ago

The "Deferred" feature is one of those things that's pretty simple, but I agree that it's really hard to totally "get" exactly how the mechanism works :-)

wannabenerd · Accepted Answer · 2011-05-28 16:46:33Z

0

Delegating the change event to the form fields could solve your problem here.

$('form').delegate('input[type=text], input[type=radio], select', 'change', 
function(evt){
    // your submits here
    console.log('changed!')
});

answered May 28, 2011 at 16:46

wannabenerd

2692 gold badges5 silver badges10 bronze badges

1 Comment

Kevin Monk Over a year ago

Thanks for your response but detecting the changes on the form wasn't the problem. '$("form :input").live('change', function(){ // If a form input changes $(this).closest('form').addClass("changed"); });'

Collectives™ on Stack Overflow

JQuery deferred with .each()

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related