How to dynamically pass data parameter in a jquery ajax call (multiple arrays of data)

Question

I have this ajax code:

return $.ajax({
        type: "POST",
        url: "somefile.php",
        cache:false,
        data: { "yfilter": $("#yearFilter").serializeArray(),
            "gfilter": $("#genreFilter").serializeArray() },
        dataType:"json",
        success: function(data){
            alert("success");
        }

This works fine, but I need to pass the data parameter dynamically. For now I need the above data parameter content and a single string.

How do I pass this dynamically? / How do I store it in a variable and pass it to the "data:" field?

 { "yfilter": $("#yearFilter").serializeArray(),
    "gfilter": $("#genreFilter").serializeArray() }

I tried JSON.stringify I I couldn't get it to work probably due to the data being an array.

The year and genre arrays are coming directly from the jquery drop down menu. It is selected like by it's #id like so "$("#yearFilter")". This is the select form element.

<select multiple="multiple" name="yearFilter[]" class="filterChange" id="yearFilter">

What I need at the base level is:

var someData = "";


    if(...){
        someData = { "yfilter": $("#yearFilter").serializeArray(),
                "gfilter": $("#genreFilter").serializeArray() };
    }
    else if(...){
        someData = "sampleString";
    }

And in ajax call:

...
data: someData,
...

I mean that I need to pass a variable with either the year/genre data or a single string to the data field depending what content I want displayed. — DominicM
– DominicM, Commented Oct 28, 2012 at 13:32
Yes, but the issue is that I am passing 2 arrays: genre and year. — DominicM
– DominicM, Commented Oct 28, 2012 at 13:34

charlietfl · Accepted Answer · 2015-02-10 14:16:27Z

11

I think I have an idea what you want but post has been overly complicated by extraneous issues like json stringify . Here's a function that could be used in several places eleswhere in your code to make one type of AJAX call or another.

You would then perhaps have several buttons and call the function within handlers for each type of button and change the argument passed to function

doAjax('someval');/* use in button 1*/
doAjax('someOtherval');/* use in button 2*/



function doAjax(arg) {

    var someData = "";
    if (arg == 'someval') {
        someData = {
            "yfilter": $("#yearFilter").val(),
            "gfilter": $("#genreFilter").val()
        };
    } else {
        someData = "sampleString";
    }

    $.ajax({
        type: "POST",
        url: "somefile.php",
        cache: false,
        data: someData,
        dataType: "json",
        success: function(data) {
            if (arg == 'someval') {
                alert("success 1");
            } else {
                alert("success 2");
            }
        }
    })
}

edited Feb 10, 2015 at 14:16

answered Oct 28, 2012 at 14:25

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

DominicM Over a year ago

Agreed, I assumed it couldn't be achieved by simply moving the current arrays in the same format to a variable. Thanks for getting to the bottom of it!

jaco · Accepted Answer · 2012-10-28 13:47:01Z

1

Hope I've understood what you're asking for. You could do something like this:

var parameters = {};
if (...) {
    parameters = $("#yearFilter").serializeArray();
}
if () {
    parameters = $("#genreFilter").serializeArray();
}

and then replace the line:

parameters: { "yfilter": $("#yearFilter").serializeArray(),
              "gfilter": $("#genreFilter").serializeArray() },

with:

data: parameters,

answered Oct 28, 2012 at 13:47

jaco

3,5265 gold badges28 silver badges43 bronze badges

2 Comments

jaco Over a year ago

...but i'm not sure if this was what you were asking for!

DominicM Over a year ago

It's close but it won't work because I need to pass BOTH year and genre arrays at the same time :)

user991513 · Accepted Answer · 2012-10-28 15:26:35Z

JSON type should be best option for dynamically data. push whatever data you wish to inside json like shown below, Hence create your json dynamically and send as ajax data.

var employees = {
    accounting: [],
    dept: "HR"
}; 

employees.accounting.push({ 
   "firstName" : item.firstName,
   "lastName"  : item.lastName,
   "age"       : item.age 
});


$.ajax({
        url: POSTURL,
        type: 'POST',
        dataType: 'json',
        data : employees,
        contentType: 'application/json; charset=utf-8',
        success: function (results)
        {

        },
        error: function (results)
        {
            jQuery.error(String.format("Status Code: {0}, ", results.status, results.statusText));
        }
    });

Brijesh Kansagara · Accepted Answer · 2013-04-03 09:24:29Z

0

Try it:

someData = JSON.stringify({ yfilter: $("#yearFilter").val(), gfilter: $("#genreFilter").val() });

It will work.

answered Apr 3, 2013 at 9:24

Brijesh Kansagara

92 bronze badges

Collectives™ on Stack Overflow

How to dynamically pass data parameter in a jquery ajax call (multiple arrays of data)

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related