I'm attempting to pass 4 pieces of data through ajax post (3 text strings, and 1 multidimensional array of text strings). When I make my ajax request, I'm only able to retrieve the 3 text strings, not the array. This is my function that houses the ajax request...
function page_load(page_num, prev_page, next_page, form_arr)
{
$.ajax({
type: 'post',
cache: false,
url: 'page_content.php',
data: {'page_num' : page_num,
'prev_page': prev_page,
'next_page': next_page,
'form_arr' : form_arr
}
}).done(function(data){
$('#main_content').empty().html(data);
});
}
When the function is executed, all data is (supposed to be) passed to "page_content.php", where I pull the form_arr parameter (with no success)...
<?php
//test parameter pull
echo '<pre>';
var_dump($_POST);
echo '</pre>';
?>
What I see is this...
array(3) {
["page_num"]=>
string(5) "start"
["prev_page"]=>
string(1) "0"
["next_page"]=>
string(1) "1"
}
I've confirmed that the array is being created properly and passed successfully to the "page_load" function (I've been able to loop through the array inside the function, and alert each string). If I change the "form_arr" variable to a string, instead of an array, outside of the function, I am able to pull it, just like the other 3 parameters.
Is there something that I'm missing with this?
This is my entire js file...
$(document).ready(function()
{
//initial page load
var page_num = 'start';
var prev_page = 0;
var next_page = 1;
var form_arr = new Array();
var form_element = new Array();
form_element['name'] = 'TAG NAME';
form_element['value'] = 'N/A';
form_arr.push(form_element);
page_load(page_num, prev_page, next_page, form_arr);
//START button click event handler
$('#main_content').delegate('a.button', 'click', function(e)
{
var btn_id = $(this).attr('href');
if(!$(this).hasClass('disabled')){
//call button_click function
button_click($(this), btn_id);
}
e.preventDefault();
});
//END button click event handler
$('#main_content').delegate('form', 'submit', function(e){
e.preventDefault();
});
//START "other" option select from dropdown
$('#main_content').delegate('select.dropdown', 'change', function(e)
{
var selected = $(this).find("option:selected");
var target = $(this).children('option.trigger').attr('class').replace('trigger ', '');
if(selected.hasClass('trigger'))
{
$('.hidden_view.' + target).show();
}else
{
$('.hidden_view.' + target).hide();
}
});
//END "other" option select from dropdown
/*** FUNCTIONS ***/
//START button_click function
function button_click(btn_obj, btn_id)
{
//set next and previous page values
var page_num = parseInt(btn_id);
var prev_page = page_num - 1;
var next_page = page_num + 1;
/* START LOOP THROUGH FORM AND PULLING VALUES */
var form = btn_obj.parent();
var form_arr = form_element_loop(form);
page_load(page_num, prev_page, next_page, form_arr);
}
//END button_click function
//START page_load function
function page_load(page_num, prev_page, next_page, form_arr)
{
var ajaxData = JSON.stringify(form_arr);
$.ajax({
type: 'post',
cache: false,
url: 'page_content.php',
data: {'page_num' : page_num,
'prev_page': prev_page,
'next_page': next_page,
'form_arr' : ajaxData}
}).done(function(data){
$('#main_content').empty().html(data);
});
}
//END page_load function
//START form_element_loop function
function form_element_loop(form)
{
var form_arr = new Array();
var x = 0;
$(form).children().each(function()
{
var element_tag = $(this).prop('tagName').toLowerCase();
if(element_tag == 'section' || element_tag == 'article' || element_tag == 'div')
{
if($(this).is(':visible'))
{
$(this).children().each(function(){
var element_tag = $(this).prop('tagName').toLowerCase();
var form_element = form_element_switch($(this));
});
}
}else
{
var form_element = form_element_switch($(this));
}
if(form_element.length > 0)
{
form_arr[x] = form_element;
}
x++;
});
return form_arr;
}
//END form_element_loop function
function form_element_switch(form_obj, form_tag)
{
var form_element = new Array();
switch(form_obj.prop('tagName').toLowerCase())
{
case 'a':
break;
case 'label':
break;
case 'input':
form_element['name'] = form_obj.attr('name');
form_element['value'] = form_obj.val();
break;
case 'select':
form_element['name'] = form_obj.attr('name');
form_element['value'] = form_obj.find(':selected').text();
break;
}
return form_element;
}
});
You can not send javascript concepts to PHP code. In fact, in general, you can only POST strings from client to servers.
The smartest way is to encode it in JSON:
function page_load(page_num, prev_page, next_page, form_arr)
{
$.ajax({
type: 'post',
cache: false,
url: 'page_content.php',
data: {'page_num' : page_num,
'prev_page': prev_page,
'next_page': next_page,
'form_arr' : JSON.stringify(form_arr)
}
}).done(function(data){
$('#main_content').empty().html(data);
});
}
then decode it in PHP into an PHP array@
$form_arr = json_decode($_POST['form_arr'],true);
With the limited info you have given, the best I can do is say you cant send an array through ajax. In the past I have solved this issue by calling the JavaScript method join(), which will turn an array into a comma delimited string. On the back end I would turn that comma delimited string back into an array. So for example if i wanted to send this array:
var arr = ["joe,"sam","jane"];
I would do this in my ajax function:
$.ajax({
data:{
arr : arr.join()
}
})