Post array is missing json from ajax request - json

Question

I'm trying to make a dynamic document previewer. The user can input certain document header options and based on their account information it will generate a document with a dynamic header. I eventually want to preview a full pdf but I am working on just the header right now.
What I am trying to do is make a page with a form that the user can fill out, then press a button to preview the header.
$.ajaxSetup({
type: 'POST',
timeout: 10000
});
$("#preview_header").click(function(){
var full_url = //appropriate URL
var preview_data = {
"wsid": "default",
"page": "default",
"banner_area1": "default",
"banner_area2": "default",
"banner_area3": "default",
"uid": "default",
"fid": "default",
"cid": "default",
"assignment_type": "default"
};
preview_data.wsid = $("#worksheet_picker").val();
preview_data.page = $("#page_picker").val();
preview_data.banner_area1 = $("#banner_area1").val();
preview_data.banner_area2 = $("#banner_area2").val();
preview_data.banner_area3 = $("#banner_area3").val();
preview_data.uid = $("#member_uid").val();
preview_data.fid = $("#family_id").val();
preview_data.assignment_type = 'family';
preview_data.cid = $("#class_id").val();
var JSONText = JSON.stringify( preview_data );
alert('Full JSON - ' + JSONText);
$.ajax({
async: true,
url: full_url,
data: { previewInfo : JSONText }, //Passes necessary form information
dataType: 'json',
success: function(output){
var reply = output;
if ( reply.status == "success" ){
$("#preview").attr("src", reply.image );
} else {
alert('Failed to create image preview of the assignment.');
}
}
});
});
As far as I can tell, the above method is working fine. It hits the right Codeigniter page and when the ajax method is set to return a hard coded image it works just fine. The AJAX seems to be well formatted but just in case here is what it outputs when I fill out forms with the corresponding values:
Full JSON - {"wsid":"4","page":"1","banner_area1":"link1",
"banner_area2":"link2","banner_area3":"link3",
"uid":"1","fid":"1","assignment_type":"family"}
So first off, let's start with what is working in the corresponding controller method for the ajax reply:
$data = array(
'status' => 'success',
'image' => //static image link
);
$this->output->set_content_type('text/javascript;charset=UTF-8');
echo json_encode($data);
But whenever I try to modify it like so:
$preview_data = json_decode($this->input->post('previewInfo'));
//Got this one
mail('me#gmail.com', 'Start Email', 'Some email' );
//Empty email
mail('me#gmail.com', 'Dump Post', var_dump($_POST));
//Empty email
mail('me#gmail.com', 'Post data', var_dump($preview_data) );
//returns an email with 1 for body
mail('me#gmail.com', 'Post data', print_r($this->input->post()) );
//returns an email with 1 for body
mail('me#gmail.com', 'Post data',
print_r($this->input->post('previewInfo')) );
//returns an email with 1 for body
mail('me#gmail.com', 'Post data', print_r($preview_data) );
$data = array(
'status' => 'success',
'image' => //static image link
);
$this->output->set_content_type('text/javascript;charset=UTF-8');
echo json_encode($data);
The modified one doesn't return the static data either. So it would seem that the post array is not being intialized properly. Anyone see the bug?

Answer 1

If you want to send your Ajax request with the post method, you need to set type to POST in your $.ajax options.
Also, async is true by default, so setting it is not necessary. Additionally, you should consider using .done and .fail as opposed to success and fail, as they are slated to be deprecated very soon.
Like so:
$.ajax({
type: "POST",
url: full_url,
data: { previewInfo : JSONText }, //Passes necessary form information
dataType: 'json'
}).done(function (output, textStatus, jqXHR) {
var reply = output;
if ( reply.status == "success" ){
$("#preview").attr("src", reply.image );
} else {
alert('Failed to create image preview of the assignment.');
}
}).fail(function (jqXHR, textStatus, errorThrown) {
// now you have the XHR, text status, and error to debug with
});

Answer 2

There was 2 problems that lead to the solution to this problem:
1)
As Austin and Gavin said: var_dump and print_r should not be outputting to the browser.
The solution was to debug with firefox extensions / chrome.
2)
$preview_data = json_decode($this->input->post('previewInfo'));
was changed to
$preview_data = json_decode($this->input->post('previewInfo'), true);
The secondy optional parameter of json_decode is to tell the method whether you are expecting an associative object or a list of things. As it happens, I was reading in and wanted an associative array.