jQuery ajax method doesn't pass post data key when using anonymous function

Question

I have tried to send one of the key to data parameter as anonymous function, but whatever datatype it returns, Jquery doesn't pass it to server.

Examples:

$.ajax({
    type: 'post',
    url: 'http://host.com/cart',
    dataType: 'html',
    data: {
        'quantity': function () {
            var return_obj = [];
            return_obj['1:YTowOnt9'] = '1';
            return return_obj;
        },
        'action': 'cart-update-quantity'
    },
    success: function(data) {
        console.log(data);
    }
});

this has the action POST key, however quantity key is empty string. I tried also as string and object.

This example is working:

$.ajax({
    type: 'post',
    url: 'http://host.com/cart',
    dataType: 'html',
    data: {
        'quantity': {
            '1:YTowOnt9': '1'
        },
        'action': 'cart-update-quantity'
    },
    success: function(data) {
        console.log(data);
    }
});

How can I send anonymous function to quantity key in data? The anonymous function will get some of the form inputs dinamically. I also have tried jQuery serializeArray, but it send the data wrong.

Why do you want to put a function there? Just pass a dynamic object that is built before the ajax call. — Bergi
– Bergi, Commented Jul 7, 2014 at 11:01
@Bergi: Thanks for pointing that out. For me, Array.length equals zero to non number keys is a big point. — machineaddict
– machineaddict, Commented Jul 7, 2014 at 11:26

iCollect.it Ltd · Accepted Answer · 2014-07-07 12:36:53Z

5

You do not need to defer execution of the anonymous function, so just call it immediately to return your object:

$.ajax({
    type: 'post',
    url: 'http://host.com/cart',
    dataType: 'html',
    data: {
        'quantity': (function () {
            var return_obj = {};
            return_obj['1:YTowOnt9'] = '1';
            return return_obj;
        })(),
        'action': 'cart-update-quantity'
    },
    success: function(data) {
        console.log(data);
    }
});

This is called an IIFE (immediately Invoked function expression).

Alternatively, just build the object before the Ajax call.. In any case the error was down to passing a function and not the result of the function.

*Note: This code includes an edit by Bergi to create an object (with {}) instead of an array (with [])

You can of course simply that IIFE to an anonymous object declaration:

'quantity': (function () {
        return {'1:YTowOnt9': '1'};
    })(),

edited Jul 7, 2014 at 12:36

answered Jul 7, 2014 at 10:58

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

2 Comments

machineaddict Over a year ago

Your code functioned right away. I also found this as the same example. I was thinking that self invoked functions will invoke themselves only once. However having the ajax in a function will invoke the IIFE every time I invoke the main function, correct?

iCollect.it Ltd Over a year ago

Self invoked functions get called based on where they are. If in a loop or function they get called each time. You often see them as globals in which case they only get called once. Cheers.

Collectives™ on Stack Overflow

jQuery ajax method doesn't pass post data key when using anonymous function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related