I am trying to make an AJAX call within WP, though I always get '0' as the return value. I've looked through SO and WP Stack Exchange but still haven't had any luck with this.
Steps that I have taken:
including die() or wp_die() at the end of php script
deleting both contentType: false, and processData: false
altering data: fd, so it does not pass in the 'fd' variable, but an actual object with the needed information
verified the ajax url 'ajax_object.ajax_url'
Any help is greatly appreciated.
JS FILE
let fd = new FormData();
fd.append("action", "user_zip");
fd.append("security", ajax_object.ajax_nonce);
fd.append("zip", zip);
$.ajax({
url: ajax_object.ajax_url,
data: fd,
type: "POST",
contentType: false,
processData: false,
success: function (data) {
console.log(data);
},
});
PHP File
function userZip()
{
wp_verify_nonce('ajax_file_nonce', 'security');
echo 'Test';
wp_die();
}
add_action('wp_ajax_nopriv_user_zip', 'userZip');
add_action('wp_ajax_user_zip', 'userZip');
Related
I filled up an array with a lot of information(80+variables) and 1 file.
var ArrayEnv= {LOTS OF VARIABLES DECLARED + 1 File}
console.log(ArrayEnv); -> Just for testing purposes
$.ajax({
url: 'controller/send_data',
data: ArrayEnv,
type: 'POST',
cache: false,
contentType: false,
processData: false,
before: '',
success: function(data) {
console.log('Ajax Value: '+data);
}});
So, when I send the data to the controller without the FILE, everythin goes right, but whenever I send a file it crashes.
I dont want to use formData since im getting and validating multiple variables through branchings on the JS.
I've done a lot of research and im really losing hope...
is there any way to send a file in the same array that containts the data?
Update:
Actually had to use formData to make it work
data = new FormData($("#validatedForm")[0]);
$.ajax({
url: 'controller/send_data',
data: data,
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
console.log('Load');
},
method: 'POST',
// type: 'POST', // For jQuery < 1.9
success: function ( data ) {
console.log( data );
}
});
echo json_encode($mockImageUrl); //I do this in php
In js (just the essence):
formdata.append('variation_id', variation.id);
formdata.append('image_url', s3_url);
jQuery.ajax({
url: 'http://everframe.wordpress.dev/wordpress/wp-admin/admin-ajax.php',
type: 'POST',
data: formdata,
dataType: 'json',
processData: false,
contentType: false,
success: function(data) {
console.log(data);
}
and of course the problem is that I get an error "unexpected token.." as it tries to parse html as json. Tried to set contentType: 'application/json', but it starts returning only 0 without further necessary results.
Yet not sure how I could handle this.
Faced with such a problem that you can't add parameters to ajax request, because there is a "Form Data" and it does not work to add more options. When you add in the parameter 'data' another variable, the error occurs. How to do that would be to post a file and parameters in one request?
Forgive the mistake, error or no, the php file simply does not output anything, rather empty values
//Here the file is sent without problems, but the parameters no more don't accept php file, nothing displays in the result
var fd = new FormData();
fd.append('file', input[0].files[0]);
$.ajax({
url: "/controllers/createNewsController.php",
data: fd,
type: "POST",
processData: false,
contentType: false,
success: function(data) {
$(".news .containers").append(data);
}
});
//When this code runs the PHP file won't take anything, although I was expecting the output variables and the file. Using var_dump, $_POST and $_FILES displays array(0){}
var fd = new FormData();
fd.append('file', input[0].files[0]);
$.ajax({
url: "/controllers/createNewsController.php",
data: {fd, title:newsHeader, description:description, hashTag:hashTag, themeHashTag:themeHashTag, viewNews:viewNews},
type: "POST",
processData: false,
contentType: false,
success: function(data){
$(".news .containers").append(data);
}
});
//Similarly, nothing appears in the php file
var fd = new FormData();
fd.append('file', input[0].files[0]);
$.ajax({
url: "/controllers/createNewsController.php",
data: {fd:fd, title:newsHeader, description:description, hashTag:hashTag, themeHashTag:themeHashTag, viewNews:viewNews},
type: "POST",
processData: false,
contentType: false,
success: function(data){
$(".news .containers").append(data);
}
});
Just like you have appended the file, you can append more data into it like:
fd.append('file', input[0].files[0]);
fd.append('var1', val1);
fd.append('var2', val2);
I trying to send two images with ajax (inside submitHandler) after using jquery validator plugin and i don't know hoy i cant take and send this image by ajax.
My code here:
var submitHandler = function(form) {
var formData = form[0];
var formData = new FormData(formData);
$.ajax({
url: 'function/savePreInscripcion.php',
type: 'POST',
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function(data){
alert(data);
}
});
};
but this dont work..
this display this error:
TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
var formData = new FormData(formData);
so.. what's worng here?
Thnx for the help!,
I resolve this..
Just change a little party on my code..
var submitHandler = function(form) {
$.ajax({
url: 'function/savePreInscripcion.php',
type: 'POST',
data: new FormData(form),
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function(data){
alert(data);
}
});
};
Just I change the call to the form and put this directly on the data whit the next code: "data: new FormData(form)" and it work fine! =)
I wanted to replace my html with the new Ajax response html but this error shows in the console and my script files are not loading correctly. Apparently this error comes in the file "jquery-1.10.1.min.js". Following is my ajax code which I used to replace with the html in the success function.
$(function() {
$('#addcustomer-done').click(function() {
var formData = new FormData($('#submit_form')[0]);
//---------------------- AJAX CALL 1 -----------------------------------------//
$.ajax({
// headers : {
// 'X-CSRF-Token' : document.getElementsByName('csrfmiddlewaretoken')[0].value
// },
url : "/savecustomer/",
type : "POST",
data:formData,
contentType: false,
cache: false,
processData: false,
async: false,
cache:false,
contentType: false,
processData: false,
success : function(data) {
alert(data);
$("html").html("");
$("html").html(data);
}
I'm a beginner at ajax. Kindly guide me how to get rid of this error. Thanks in advance.
Dont clear the elements inside html tags. Use an element present in the dom to append the value. Also remove async:false from your ajax. Because ajax should run asynchronously.
$(function() {
$('#addcustomer-done').click(function() {
var formData = new FormData($('#submit_form')[0]);
$.ajax({
url: "/savecustomer/",
type: "POST",
data: formData,
success: function(data) {
console.log(data);
$("#id of element inside tab").append(data);
}
});
});
});