Javascript scope issue with jquery post and promise

Question

I am trying to build an array from the responses of a jquery post. I have the following code:

categories_names = [];
$(categories).each(function(index, category_id) {
    $.post('/modules/blog/add_post_categories', {post_id:result.result, category_id:$(category_id).val()},
    function(result)
    {
        categories_names.push = result;
    });
}).promise().done(function() {
    var final_cats = categories_names.join("");
    console.info(final_cats);
});

The post request inserts the category id into a table and returns the name of that category formatted like <li>Category Name here</li> so that once the array is built and all categories selected (by checkbox in the form previous to this) are entered into the database, the array can be joined and inserted as html to the final view. At the moment the code is just printing it out in the console as you can see but as you've probably guessed, it returns (an empty string)

I know this is most likely a scope issue since that's the area of javascript that still totally baffles me, so I'm hoping someone can shed some light on it.

Are you sure the post is actually returning anything? Can you see it in the developer tools? — Matt Burland
– Matt Burland, Commented May 29, 2013 at 17:16
@MikeChristensen - I assumed not... but that would explain it... should I change the post to $.ajax so I can control that? — Helen Danger Burns
– Helen Danger Burns, Commented May 29, 2013 at 17:17
Your .promise().done(...) isn't doing what you think it is. It's simply resolving instantly because there are no animations on the elements you are iterating over. Also, your syntax for [].push is wrong. — user400654
– user400654, Commented May 29, 2013 at 17:24

user400654 · Accepted Answer · 2013-05-29 17:56:22Z

3

Your .promise().done(...) isn't doing what you think it is. It's simply resolving instantly because there are no animations on the elements you are iterating over. Also, your syntax for [].push is wrong.

var defArr = $(categories).map(function(index, category_id) {
    return $.post('/modules/blog/add_post_categories', {post_id:result.result, category_id:$(category_id).val()});
}).get();

$.when.apply(null,defArr).done(function() {
    //var categories_names = [];
    //for (var i = 0; i < arguments.length; i++) {
    //    categories_names.push(arguments[i][0]);
    //}
    var categories_names = $.map(arguments,function(i,arr) {
        return arr[0];
    });
    var final_cats = categories_names.join("");
    console.info(final_cats);
});

edited May 29, 2013 at 17:56

answered May 29, 2013 at 17:28

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

10 Comments

Helen Danger Burns Over a year ago

Wow. it would explain why it is all happening out of order as my comment above explained. Thanks for this. I shall try it now - I had no idea that the promise done was confined to animations though?

Mattias Buelens Over a year ago

Even better, you don't need to manually push the results to the categories_names array. The promise of each $.post is resolved with an array of the form [ data, statusText, jqXHR ]. Thus, you can retrieve all category names from the promise results in the done callback using $.map(arguments, function(x) { return x[0] });.

Mattias Buelens Over a year ago

@HelenDangerBurns $.promise() produces a promise for DOM element animations. AJAX requests themselves already implement promises, but you need to make sure that you keep those promises around when you want to bind to them! In your original code, there was nothing keeping track of those promises.

user400654 Over a year ago

The latest edit makes it populate the array in the correct order

user400654 Over a year ago

When you call .promise() on a jQuery collection, it works off of the "fx" queue. That's why your original code only tracked animations.

|

Mike Christensen · Accepted Answer · 2013-05-29 17:28:26Z

0

categories_names.push = result;

can you try changing this to

categories_names.push(result);

because push is a method, not a variable.

edited May 29, 2013 at 17:28

Mike Christensen

91.8k52 gold badges223 silver badges349 bronze badges

answered May 29, 2013 at 17:25

Rameshkrishnan S

3931 gold badge3 silver badges8 bronze badges

Collectives™ on Stack Overflow

Javascript scope issue with jquery post and promise

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related