Using JQuery Ajax to post an array

Question

Using JQuery Ajax to post an array

I have searched extensively for solutions, but none seem to fit my situation.

Currently, I am utilizing the Jquery-Plugin DataTable with multiple tables within a form. The exact number of tables is unknown.

The challenge lies in retrieving form data from the plugin using the following code snippet:

objDataTables.each(function(index){
    dtArray[$(this).attr('id')] = $('input', $(this).fnGetNodes()).serialize();
});

I am struggling to send the dtArray to the server via $.ajax. Despite attempting to create an Object with dtArray = {}, the resulting postdata remains empty.

If anyone has insight or suggestions on why this might be happening, it would be greatly appreciated.

Thank you in advance.

Please note: I am not utilizing JSON.stringify(...)

jquery ajax json

Answer 1

Answer №1

Before sending the data, ensure that it is contained within an input or textarea tag. The serialize function does not gather information from elements like tables.

If your data is not in input or textarea fields but you need to gather it, you must loop through all rows and columns to collect it manually.

Answer 2

Before sending the data, ensure that it is contained within an input or textarea tag. The serialize function does not gather information from elements like tables.

If your data is not in input or textarea fields but you need to gather it, you must loop through all rows and columns to collect it manually.

Answer 3

Answer №2

Got it :) Instead of creating an Array, try creating an Object. Just remember not to serialize the Object. If someone else is facing the same issue... here's my Solution

var tData = {};
for(var index in dtArray){
    tData[index] = $('input', dtArray[index].fnGetNodes()).serialize();
};

And for the Ajax part:

$.ajax({
    url: 'ajax.php',
    type: "POST",
    dataType: "json",
    timeout: 4000,
    data: { func: "ajax", formData: tData },
    success: function(data, textStatus, jqXHR){
        // do something
    },
    error: function(jqXHR, textStatus, errorThrown){
        // handle error
    }
});

Answer 4

Got it :) Instead of creating an Array, try creating an Object. Just remember not to serialize the Object. If someone else is facing the same issue... here's my Solution

var tData = {};
for(var index in dtArray){
    tData[index] = $('input', dtArray[index].fnGetNodes()).serialize();
};

And for the Ajax part:

$.ajax({
    url: 'ajax.php',
    type: "POST",
    dataType: "json",
    timeout: 4000,
    data: { func: "ajax", formData: tData },
    success: function(data, textStatus, jqXHR){
        // do something
    },
    error: function(jqXHR, textStatus, errorThrown){
        // handle error
    }
});

Using JQuery Ajax to post an array

Answer №1

Answer №2

Similar questions

Show a dynamic dropdown box using AJAX if a specific variable is present

Ways to retrieve information from a database using a specific ID stored in a JSON format

Parsing JSON responses for either arrays or objects

Why does my ajax call return a file not found error after the session has expired?

Sending JSON data to Python CGI script

Removing a parameter from a variable in jQuery and JavaScript

Warning message triggered by PHP cURL script

Retrieve the heading from a pop-up box

Create a personalized edit button for ContentTools with a unique design

The Ajax confirmation prompt seeks a singular piece of information

Perform the function prior to making any adjustments to the viewmodel attributes

What is the proper method for adding a file to formData prior to sending it to the server using a

What is the best way to handle JSONp response parsing using JavaScript?

Deleting occurrences of a specific text from a JSON document and subsequently analyzing its contents

Update the div each time the MySQL table is refreshed

Find an XML element that shares a common attribute with another element at the same level

Material-inspired Design Device Compatible DIV slide with JS, JQuery, and CSS

Developing a innovative and interactive nested slider using Jssor technology

The functionality of .bind() is malfunctioning on both Microsoft Edge and Google Chrome browsers

What could be causing the validation messages to not display when utilizing Ajax in an ASP.NET Core application?