CODEWITHSUNDEEP
ajaxjquery
DominicM
DominicM

Reputation: 6898

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

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,
...

Upvotes: 4

Views: 56787

Answers (4)

charlietfl
charlietfl

Reputation: 171669

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");
            }
        }
    })
}

Upvotes: 11

Brijesh Kansagara
Brijesh Kansagara

Reputation: 9

Try it:

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

It will work.

Upvotes: 0

user991513
user991513

Reputation:

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));
        }
    });

Upvotes: 0

jaco
jaco

Reputation: 3516

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,

Upvotes: 1

Related Questions