DATATABLES AJAX METHOD NOT PROPERLY SENDING USER FORM DATA TO SERVER
DATATABLES AJAX METHOD NOT PROPERLY SENDING USER FORM DATA TO SERVER
When I submit my website form for processing, I get the following error...
SyntaxError: JSON.parse: unexpected character at line 6 column 1 of the JSON data
After a couple of days dealing with this issue, I was able to isolate the problem to the DataTables Ajax method.
Specifically, my website provides a form that accepts data and/or text file upload from user. Once provided, this info is processed into a javascript FormData object and sent to the server via DataTable's Ajax POST method ("ajax" {"type": "POST","data": object_name}), and the server returns the JSON formatted data array to be processed into the table.
What appears to be happening is that the DataTables processor is trying to manipulate the sent data property (the FormData object), but is throwing back the error because that data is not in proper JSON data object format. However, when I run the same process through jQuery's Ajax method -- with the EXACT SAME PROPERTY CONFIGURATIONS -- I get the appropriate data from the server.
I have read every conceivable instruction on your website and attempted every conceivable fix, but nothing works. Please advise me on what config adjustment would be required to get this processing running right. Thank You.
I have provided the code snippet below. The jQuery Ajax method is commented out, while the DataTables Ajax method is uncommented.
function product_submit(){
$(document).ready(function(){
$("#prod_actions").submit(function(event) {
event.preventDefault();
var main_form = $("#prod_actions")[0];
var main_obj = new FormData(main_form);
var the_skus = "";
var the_val = "";
if($("#action_scope_upload").val()) {
main_obj.append("req_type","BATCH");
} else if($("#action_scope_multi").val()) {
the_val = $("#action_scope_multi").val();
main_obj.append("req_type","LIST");
} else if($("#action_scope_single").val()) {
the_val = $("#action_scope_single").val();
main_obj.append("req_type","SINGLE");
}
if(the_val) {
the_skus = the_val.trim();
}
else {
the_skus = "SEE_BATCH_SKU_FILE";
}
main_obj.append("sku_list",the_skus);
alert("THE SKUS:\n\n" + the_skus);
var html_url = "html_view_products.php";
var the_html = "";
var the_stat = "";
var the_err = "";
$.ajax({
type: "POST",
url: html_url,
async: false,
success: function(dat_srv,dat_stat,dat_xhr) {
the_stat = dat_stat;
if(the_stat == "success") {
the_html = dat_srv;
$("#main_area").html(the_html);
}
},
error: function(dat_xhr,dat_stat,dat_err) {
the_stat = dat_stat;
the_err = dat_err;
}
});
if(jQuery.type(main_obj) === "object") {
alert("VALID OBJECT");
} else {
alert("INVALID OBJECT");
}
if(the_stat == "success" && main_obj) {
var post_url = "html_view_products_results.php";
var the_async = false;
var the_cache = false;
var the_content = false;
var the_process = false;
var the_data = "";
$("#view_data").dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": post_url,
"type": "POST",
"async": the_async,
"cache": the_cache,
"contentType": the_content,
"processData": the_process,
"data": main_obj,
"error": function(dat_xhr_e,dat_stat_e,dat_err) {
the_err = dat_err;
alert("ERROR:\n" + the_err);
},
"complete": function(dat_xhr_c,dat_stat_c) {
the_stat = dat_stat_c;
alert("STATUS:\n" + the_stat.toUpperCase());
}
},
"columns": [
{"data": "MFG"},
{"data": "MODEL"},
{"data": "ESKU"},
{"data": "UPC"},
{"data": "DESCR"},
{"data": "COND"},
{"data": "ACTIVE"},
{"data": "DISC"},
{"data": "QTY"},
{"data": "COST"},
{"data": "OFFER"},
{"data": "MKTPL"},
{"data": "CAT"},
{"data": "SUBCAT"},
{"data": "L"},
{"data": "W"},
{"data": "H"},
{"data": "WT"},
{"data": "SHIPS"},
{"data": "IMG"}
],
"ordering": true,
"searching": false,
"order": [[0,'asc'],[2,'asc']],
"dom": "ft",
"lengthChange": false
});
/*
AJAX METHOD THAT WORKS FINE WHEN ACTIVE (SEE BELOW)
$.ajax({
url: post_url,
type: "POST",
async: the_async,
cache: the_cache,
contentType: the_content,
processData: the_process,
data: main_obj,
error: function(dat_xhr_e,dat_stat_e,dat_err) {
the_err = dat_err;
alert("ERROR:\n" + the_err);
},
complete: function(dat_xhr_c,dat_stat_c) {
the_stat = dat_stat_c;
alert("STATUS:\n" + dat_stat_c.toUpperCase());
}
});
END WORKING AJAX METHOD
*/
} else if(the_stat == "success") {
alert("EMPTY REQUEST");
} else {
alert("INTERNAL PROCESSING ERROR:\n\n" + the_stat);
};
});
});
};
Answers
...