I have an Ajax command which appears to work on most platforms but I cannot get it to work on wordpress due to my lack of understanding of the admin-ajax.php
I am trying to get a form to convert to PDf and then upload to server, this should be able to be done with jQuery, Ajax and PHP, however my Ajax command is not working.
my jQuery for validation and then conversion to PDF
jQuery(function($){
var $form = $("form[name='pdf-download']"),
$successMsg = $(".alert");
$.validator.addMethod("letters", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
});
$form.validate({
rules: {
firstname: {
required: true,
minlength: 3,
letters: true
},
email_id: {
required: true,
email: true
}
},
messagess: {
firstname: "Please specify your name (only letters and spaces are allowed)",
email_id: "Please specify a valid email address"
},
submitHandler: function() {
$ = jQuery;
$( "#submit" ).click(function() {
alert("Submitted");
make_product_sheet();
});
function make_product_sheet() {
console.log("#submit clicked");
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById("product_sheet"), function() {
ps_filename = "generated-product-sheet";
var pdf = btoa(doc.output());
$.ajax({
method: "POST",
url: "website.com/wp-content/themes/theme/uploads.php",
data: {data: pdf},
}).done(function(data){
console.log(data);
});
});
}
}
});
});
upload.php
<?php
if(!empty($_POST['data'])){
$data = base64_decode($_POST['data']);
file_put_contents( "http://website.com/wp-
content/themes/theme/POD/test.pdf", $data );
echo "success";
} else {
echo "No Data Sent";
}
exit();
?>
I would really appreciate of someone could help me convert this to a function which works on wordpress via admin-ajax.php as I am struggling to find any clear help online
Update...
Thanks to the below answer, I now have:
function sendToServer() {
let pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(document.body, {
callback: function (pdf) {
let obj = {};
obj.pdfContent = pdf.output('datauristring');
var jsonData = JSON.stringify(obj);
$.ajax({
url: "admin_url('admin-ajax.php')",
type: 'POST',
contentType: 'application/json',
data: {
action: 'so56917978_upload', // Action name.
data: pdf,
},
});
}
});
}
and in functions.php:
function so56917978_upload_callback() {
if ( ! empty( $_POST['data'] ) ) {
$data = base64_decode($_POST['data']);
file_put_contents( " /POD/ ", $data );
echo "success";
} else {
echo "No Data Sent";
}
die;
}
add_action( 'wp_ajax_so56917978_upload', 'so56917978_upload_callback' );
add_action( 'wp_ajax_nopriv_so56917978_upload', 'so56917978_upload_callback' );
also tried:
file_put_contents( "get_stylesheet_directory_uri() . '/POD/pod.pdf' ", $data );
when I run console when submitting the data, I get...
Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
at to8bitStream (jspdf.debug.js:1565)
at API.private.pdfEscape.API.pdfEscape (jspdf.debug.js:1612)
at e (jquery-2.2.4.min.js:4)
at Gb (jquery-2.2.4.min.js:4)
at Gb (jquery-2.2.4.min.js:4)
at Gb (jquery-2.2.4.min.js:4)
at Function.n.param (jquery-2.2.4.min.js:4)
at Function.ajax (jquery-2.2.4.min.js:4)
at Object.callback (POD.js?ver=1.1:40)
at Promise.doCallback_main (jspdf.debug.js:12370)
html2canvas: Preload starts: finding background-images html2canvas.min.js:7
html2canvas.Util.Children failed with exception: Cannot read property 'document' of null html2canvas.min.js:7
html2canvas.Util.Children failed with exception: Cannot read property 'document' of null html2canvas.min.js:7
html2canvas: Preload: Finding images html2canvas.min.js:7
html2canvas: Preload: Done. html2canvas.min.js:7
html2canvas: start: images: 1 / 5 (failed: 0) html2canvas.min.js:7
html2canvas: start: images: 2 / 5 (failed: 0) html2canvas.min.js:7
html2canvas: start: images: 3 / 5 (failed: 0) html2canvas.min.js:7
html2canvas: start: images: 4 / 5 (failed: 0) html2canvas.min.js:7
html2canvas: start: images: 5 / 5 (failed: 0) html2canvas.min.js:7
Finished loading images: # 5 (failed: 0)
Update your JavaScript to:
function make_product_sheet() {
console.log("#submit clicked");
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById("product_sheet"), function() {
ps_filename = "generated-product-sheet";
var pdf = btoa(doc.output());
$.ajax({
method: "POST",
url: "/wp-admin/admin-ajax.php", // Make it dynamic.
data: {
action: 'so56917978_upload', // Action name.
data: pdf,
},
}).done(function(data){
console.log(data);
});
});
}
Then in your functions.php or plugin (recommended) put:
function so56917978_upload_callback() {
if ( ! empty( $_POST['data'] ) ) {
$data = base64_decode($_POST['data']);
file_put_contents( "http://website.com/wp-content/themes/theme/POD/test.pdf", $data );
echo "success";
} else {
echo "No Data Sent";
}
die;
}
add_action( 'wp_ajax_so56917978_upload', 'so56917978_upload_callback' );
add_action( 'wp_ajax_nopriv_so56917978_upload', 'so56917978_upload_callback' );
Note: The above is not tested, but I hope is enough for you to get the idea. I recommend you adding nonces (really, please).
Learn more at WordPress Codex: AJAX in Plugins.