Function as parameter in Jquery Ajax

Question

Is it possible to put a function into a parameter for Jquery Ajax like below. dataType and data are given as functions. dataType returns a value of JSON if the returntype is JSON and text if isJson is false.

dataVal and dataVar are arrays containing the parameter names and values used to construct the data paramater. The result of the data: function would be a string as:

{dataVar[0]:dataVal[0],dataVar[1]:dataVal[1],.....,}

I'm getting an error when I try this, so, just wanted to know if this method was possible.

function getAjaxResponse(page, isJson, dataVar, dataVal, dfd) {
    $.ajax(page, {
        type: 'POST',
        dataType: function () {
            if (isJson == true) {
                return "JSON";
            } else {
                return "text";
            }
        },
        data: function () {
            var dataString = '{';
            for (var i = 0; i < dataVar.length; i++) {
                dataString = dataString + dataVar[i] + ':' + dataVal[i] + ',';
            }
            console.log(dataString);
            return dataString + '}';
        },
        success: function (res) {
            dfd.resolve(res);
        }
    });
}

Edit

As per answers and comments, made the changes. The updated function is as below. This works:

function getAjaxResponse(page, isJson, dataVar, dataVal, dfd) {
    $.ajax(page, {
        type: 'POST',
        dataType: isJson ? "JSON" : "text",
        data: function () {
            var dataString ="";
            for (var i = 0; i < dataVar.length; i++) {
                if (i == dataVar.length - 1) {
                    dataString = dataString + dataVar[i] + '=' + dataVal[i];
                } else {
                    dataString = dataString + dataVar[i] + '=' + dataVal[i] + ',';
                }
            }
            return dataString;
        }(),
        success: function (res) {
            dfd.resolve(res);
        }
    });
}

And my original question is answered. But apparently, data is not getting accepted.

The return value of the data function is just treated as the parameter name and jquery just adds a : to the end of the request like so:

{dataVar[0]:dataVal[0]}:

So, my server is unable to pick up on the proper paramater name.

I don't think so, you'd have to set data and dataType as the result of the execution of these functions — GôTô
– GôTô, Commented Apr 15, 2014 at 6:45
@Bergi: The code works now, as per answers but the 'data' result is not accepted. Apparently the return value is just treated as the parameter name. The sent data is like so: {TableName:tblLGRQueryTracking}: — Mkl Rjv
– Mkl Rjv, Commented Apr 15, 2014 at 7:19
Not accepted by what? Is the data invalid or the format? {TableName:tblLGRQueryTracking} is no valid JSON at least — Bergi
– Bergi, Commented Apr 15, 2014 at 7:24

Quentin · Accepted Answer · 2014-04-15 06:45:47Z

2

From the manual:

data
Type: PlainObject or String

So no.

Call the function. Use the return value.

data: function () { ... }();
//                       ^^ call the function

answered Apr 15, 2014 at 6:45

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Mkl Rjv Over a year ago

Original question answered. Thank You..:-)

Fuzzyma · Accepted Answer · 2014-04-15 06:46:10Z

2

Not that way. But it will work with a little change:

(function () {
    if (isJson == true) {
        return "JSON";
    } else {
        return "text";
    }
})()

That should work. You just call the function immidiately after you created it. This way, dataType is a String and the script will work. Same with data. Also use the (function(){})()-notation here

answered Apr 15, 2014 at 6:46

Fuzzyma

8,6686 gold badges32 silver badges69 bronze badges

1 Comment

Quentin Over a year ago

There's no need to wrap the whole thing in parenthesis, it's inside an object literal so it is already in a context that will make it a function expression instead of a function declaration.

Bergi · Accepted Answer · 2014-04-15 08:08:15Z

1

jquery just adds a : to the end of the request like so:
{dataVar[0]:dataVal[0]}:

No, your devtools display does. However, as you're data string does not contain a = sign, and you send the content as application/x-www-form-urlencoded, the whole body is interpreted as if it was a parameter name.

For sending JSON, you should:

use contentType: "application/json"
use data: JSON.stringify(_.object(dataVar, dataVal))¹

to ensure valid JSON is sent with the correct header (and correctly recognised as such at the server).

_{1: _.object is the object function from Underscore.js which does exactly what you want, but you can use an IEFE as well:

JSON.stringify(function(p,v){var d={};for(var i=0;i<p.length;i++)d[p[i]]=v[i];return d;}(dataVar, dataVal))}

edited Apr 15, 2014 at 8:08

answered Apr 15, 2014 at 7:53

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

3 Comments

Mkl Rjv Over a year ago

What if I just wanted to send data as data: { dataVar[0]: dataVal[0] } as I've been successfully doing for a long time and not as JSON content.

Bergi Over a year ago

Do as you want if it works, but a) don't call it "JSON" b) don't expect your server to parse it correctly c) don't expect devtools to display the request properly

Mkl Rjv Over a year ago

Thanks, the JSON.stringify method works wonders. And I took your hint and tried adding an equals instead of a semicolon and the server side program seems to accept it. Fragile, yet working. Thanks for all your help...:-)

Bhojendra Rauniyar · Accepted Answer · 2014-04-15 06:51:54Z

-1

You need to call the function with parenthesis like below:

function func1(){
//func1 code in here
}
function func2(func1){
//func2 code in here
//call func1 like this:
func1();
}

So, you can use like this:

data: function () {
//your stuff her
}(); // which mean you are having data()

edited Apr 15, 2014 at 6:51

answered Apr 15, 2014 at 6:46

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Collectives™ on Stack Overflow

Function as parameter in Jquery Ajax

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related