Make Array in Jquery For AJAX Posting - jquery-ui

Question

$('#saveplaylist').click(function () {
var length = $(' .organizer-media').length;
var contents=$(' .organizer-media');
var data = null;
for (var i = 0; i < length; i++) {
data[i] = contents[i].title;
}
$.ajax({
type: 'POST',
data: JSON.stringify(data),
url: '/Builder/Save',
success: function () {
alert("Playlist saved successfully!!");
}
})
})
As shown above in my code I am not able to send my values by making an array of data filled by using for loop How can I make an array of data & post it through AJAX?

Answer 1

You have to initialize the variable as an array, not null.
var data = [];

Answer 2

In addition to what Barmar said, you need to set content type of your ajax call to JSON
$.ajax({
type: 'POST',
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
url: '/Builder/Save',
success: function () {
alert("Playlist saved successfully!!");
}
})

Answer 3

Remove space from ' .organizer-media' and ' .organizer-media'
and change
var data = null;
to
var data = new Array();

Answer 4

Instead of JSON.stringify() you could use the $.param() method
$('#saveplaylist').click(function () {
var length = $(' .organizer-media').length;
var contents=$(' .organizer-media');
var data = null;
for (var i = 0; i < length; i++) {
data[i] = contents[i].title;
}
$.ajax({
type: 'POST',
data: $.param({data: data}),
url: '/Builder/Save',
success: function () {
alert("Playlist saved successfully!!");
}
});
});
This will store the content titles as members of the data array, which you should be able to access server side.
In Rails you would access this like so:
titles = params[:data]
In PHP it might be something like:
$titles = $_POST["data"];
EDIT:
One thing I missed, as Barmar mentioned above, you need to initialize data as an empty array, not null.