Using JSON to pass Javascript array to PHP - php

Question

I have 2 selects on my HTML, the options are loaded via my database and the user can switch the options between the boxes, like so:
<select id="column1" multiple size="10" name="FromLB" style="width:150px">
<?php foreach ($result->result() as $row) { ?>
<option value="<?php echo $row->id ?>"><?php echo $row->title ?></option>
<?php } ?>
</select>
So far so good, the final plan is for the the user to click Submit and to have access to the data on these two selects in PHP (via an array).
After digging around for a bit, it seems like JSON is the way to go.
I import json.js to my project and get to work:
function sort_cols(){
var i=0;
var p=0;
var column1 = new Array();
var column2 = new Array();
$("#column1 option").each(function()
{
column1[i]=$(this).val();
i=i+1;
});
$("#column2 option").each(function()
{
column2[p]=$(this).val();
p=p+1;
});
JSON = JSON.stringify(column1);
$.ajax({
url: '<?php echo base_url() . 'js_tests/update_news'; ?>',
type: 'POST',
data: JSON,
success: function(){
alert("Success!")
}
});
}
So far I'm only passing one array (for the first select column), but I'm getting an error:
Uncaught TypeError: Object ["15","14","1"] has no method 'stringify'
I've been following this answer:
How exactly do you use json_decode to pass a javascript array to php?
I'm wondering what am I doing wrong here, and how can I pass my second array (column2) as well?

Answer 1

In this line
JSON = JSON.stringify(column1);
you redefine the native JSON object. Use another name for your variable and you should be fine.
And as for submitting both arrays, just use an encapsulating object:
data2send = JSON.stringify( { 'column1': column1, 'column2': column2 } );
Besides instead of using an incrementing index to insert your data into the arrays, just use the native push() method.

Answer 2

There's some strange behaviour happening here, most likely caused by the fact your JSON variable is overwriting the browser's native JSON object (or the one provided by json.js in older browsers).
You can actually pass an object directly to $.ajax, so the following will work:
$.ajax({
url: '<?php echo base_url() . 'js_tests/update_news'; ?>',
type: 'POST',
data: column1,
success: function(){
alert("Success!")
}
});
If you want to pass both columns as separate parameters, change it to:
$.ajax({
url: '<?php echo base_url() . 'js_tests/update_news'; ?>',
type: 'POST',
data: {
first_column: column1,
second_column: column2
},
success: function(){
alert("Success!")
}
});
They will now be available in your PHP script as $_POST['first_column'] and $_POST['second_column'].
This way, you leave the heavy lifting of converting your objects to JSON to jQuery, so you don't need to include the json.js library at all.
Your full code, rewritten:
function sort_cols(){
var column1 = [],
column2 = [];
$("#column1 option").each(function() {
column1.push($(this).val());
});
$("#column2 option").each(function() {
column2.push($(this).val());
});
$.ajax({
url: '<?php echo base_url() . 'js_tests/update_news'; ?>',
type: 'POST',
data: {
first_column: column1,
second_column: column2
},
success: function(){
alert("Success!")
}
});
}

Answer 3

Make jQuery do the heavy lifting:
function sort_cols(){
var col1 = [], col2 = [];
$("#column1 option").each(function() {
col1.push($(this).val());
});
$("#column2 option").each(function() {
col2.push($(this).val());
});
$.ajax({
url: '<?php echo base_url() . 'js_tests/update_news'; ?>',
type: 'POST',
contentType: "application/json",
data: JSON.stringify({
column1: col1,
column2: col2
}),
success: function(){
alert("Success!")
}
});
}