I am building a web application using JQuery 3.3.1. It would seem that everytime I make ajax call, the request is sent twice. I can tell because I tried logging the requests on server side. I tried solutions from similar questions but they do not seem to help.
I separated the ajax call from click events, so it does not happen because of click event being registered twice.
$(function() {
console.log("hi");
var request = {};
request["user_id"] = 1;
request["date"] = new Date();
request["assignments"] = [{
"point_count" : 1,
"skill_mnemo" : "SKILL_FARM"
}];
$.ajax({
type: "POST",
dataType: "json",
mimeType: "application/json",
url: "./api/update_skill_point.php",
enctype: 'multipart/form-data',
data: request,
async: false,
cache: false,
success: function(result) {
console.log(result);
}
});
});
You have to debug this code by the following ways:
Check how many times hii is printing into console.
Add break point at start of $.ajax. Then check the call stack.
Check into network tab and analyse the call stack at initiator column for the corresponding ajax call.(for Chrome)
Hope it will help for you.
There is a chance that the submit button in your form is NOT set to type="button".
So, on-clicking the button, your ajax function runs and the browser also attempts to submit the form (default behavior of submit buttons) to your current URL. This might give the appearance that ajax is being called twice.
don't use
(function(){})
if we use (function(){}), it will call itself when DOM is getting ready and then again when required.
Try
function ajaxCall()
{
console.log("hi");
var request = {};
request["user_id"] = 1;
request["date"] = new Date();
request["assignments"] = [{
"point_count" : 1,
"skill_mnemo" : "SKILL_FARM"
}];
$.ajax({
type: "POST",
dataType: "json",
mimeType: "application/json",
url: "./api/update_skill_point.php",
enctype: 'multipart/form-data',
data: request,
async: false,
cache: false,
success: function(result) {
console.log(result);
}
});
}
$(document).ready(){
ajaxCall();
}
In this way you can control your ajax call,
Now you might have some idea how to deal, if not let me know, I'll try to explain more.
Related
I have been stuck for some time on passing some data from ajax to php. All works fine until I go to grab the data with php. Nothing is there but an empty array. I have tried a few different ways to resolve this and have not been successful at all. It seems a simple task has turned into a major problem for me
var canvas = document.getElementById("signature");
var ImgData = document.getElementById("Image").value = canvas.toDataURL('image/jpeg');
console.log(ImgData);
$.ajax({
url: 'upload.php',
type: 'POST',
dataType : "text",
contentType: "multipart/form-data; charset=UTF-8",
data: {'Image' : ImgData},
success: function(data) {
console.log("sucessful send:");
console.log(data);
},
error: function(d) {
console.log('error');
console.log(d);
console.log(d.responseText);
}
});
And my php I have put for testing for now
print_r($_POST);
exit;
img = $_POST['Image'];
As I was getting an Undefined Index error with php. So I set it to print_r() to see what was going on in the console
The console data shows everything is great until I grab the POSTed data and output it to see whats in it. And the array always has no value.
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCACWAu4DAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8qqACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAP//Z" ajaxsend.js:41:3
POST XHR http://example.com/upload.php [HTTP/1.1 200 OK 313ms]
sucessful send: ajaxsend.js:57:11
Array
(
)
I have also tried getting the canvas in a different fashion as well suggested by someone else such as
var pngImage = new FormData();
pngImage.append('Image', $('#signature')[0].toDataURL('image/jpeg'));
$.ajax({
url: 'upload.php',
type: 'POST',
dataType : "text",
contentType: "multipart/form-data; charset=UTF-8",
data: {'Image': $('#signature')[0].toDataURL('image/jpeg')},
And the same result happens. It sends fine but returns an empty array to php. I have also set contentType to a variety of different things to see if this was interfering with how the data was received. Nothing helped at all. I am also using signature pad 2.3.0 from github as the canvas
UPDATE:
Thanks to #Phil and his advice I have changed the code to
var canvas = document.getElementById("signature");
var ImgData = document.getElementById("Image").value canvas.toDataURL('image/jpeg');
console.log(ImgData);
$.ajax({
url: 'upload.php',
type: 'POST',
dataType : "text",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data: {'Image' : ImgData},
success: function(data) {
console.log("sucessful send:");
console.log(data);
},
error: function(d) {
console.log('error');
console.log(d);
console.log(d.responseText);
}
});
ajax timesout trying to send however when testing with plain text and changing
data: {"Image" : "Testing"},
its sends just fine. I am suspecting it is something to do with the image being sent. Am I not passing the canvas correctly to ajax or is there something I am doing incorrect?
I have a button that executes an ajax function.
Sometimes the server lags so maybe an user presses it more times, thinking the first time it didn't work...
The main ajax function looks like this:
$.ajax({
type: "POST",
url: "page.php",
dataType: "html",
data:"data=data",
success: function(){
ajax2();
ajax3();
}
});
Since that ajax function updates db and makes others 2 ajax functions i need to block the button from remake the main ajax func...
Only when ajax2() and ajax3() are finished, the button, if pressed, must remake the ajax function.
Hope to have explained well my problem!
disable the button and then reenable it when the 2 ajax are finished
/// the click event
$('yourbutton').prop("disabled",true);
/// show a loading or something....
$.ajax({
type: "POST",
url: "page.php",
dataType: "html",
data:"data=data",
success: function(){
var ajax1 = ajax2();
var ajax2 = ajax3();
$.when(ajax1,ajax2).done(function(risp1,risp2){
console.log(risp1,risp2);
$('yourbutton').prop("disabled",false);
/// hide the loading
});
}
});
read this for more info
Try this
//before this ajax call disable button
$.ajax({
type: "POST",
url: "page.php",
dataType: "html",
data: "data=data",
success: makeAjaxCalls
});
function makeAjaxCalls() {
var a1 = ajax2();
var a2 = ajax3();
$.when(a1, a2).done(function () {
//enable your button here
});
}
Unbind the event listener when it's activated the first time :
custom_ajax_handler = function(){
$('#mybutton').unbind('click'); //won't intercept event from now on.
//here is your ajax call.
ajax2();
ajax3();
}
$('#mybutton').click(custom_ajax_handler);
Then in ajax3 success rebind it :
success : function(){
$('#mybutton').click(custom_ajax_handler);
}
Note that you probably shouldn't make that much ajax calls.
Or at least that doing so won't help your server with its lags.
I'll make it easy, I want to submit data without using a form, etc, etc, etc...
I have this code:
HTML
<span class="categ-edit">Edit</span>
<span class="categ-add">Add</span>
<span class="categ-delete">Delete</span>
JQUERY
$('.categ-edit').click(function() {
$.ajax({
url: 'categoryactions.php',
type: 'POST',
data: {action: 'edit'},
});
window.location.href = "categoryactions.php";
});
$('.categ-add').click(function() {
$.ajax({
url: 'categoryactions.php',
type: 'POST',
data: {action: 'add'},
});
window.location.href = "categoryactions.php";
});
$('.categ-delete').click(function() {
$.ajax({
url: 'categoryactions.php',
type: 'POST',
data: {action: 'delete'},
});
window.location.href = "categoryactions.php";
});
And in categoryactions.php I have this:
PHP
<?php
$action = $_POST['action'];
echo $action;
?>
But when it redirects me to categoryactions.php I get nothing. I'm not sure if that's the way to submit data with AJAX but at least I tried. If someone knows how to fix this, I'll be grateful!
You click handler is making two separate requests. First, you are sending a request with AJAX, then you are going to the page. When you look at the page, you won't see the result because the result was given to the AJAX request.
The point of AJAX is to avoid changing the page.
Try this:
$('.categ-edit').click(function() {
$.ajax({
url: 'categoryactions.php',
type: 'POST',
data: {action: 'edit'},
success: function(data) {
alert(data);
}
});
});
You are actually calling "categoryactions.php" twice. First as an asynchronous call (ajax) and the second time as a redirect: window.location.href = "categoryactions.php";
In the 2nd call, nothing is being posted so your output is empty. This line does not serve any purpose - you should remove it.
The ajax call happens in the background so you won't see the output from the echo in the browser. if you really want to verify it is working, replace the echo with a file call to write it to a file. Then check the file contents.
Using redirection with Ajax doesn't make sense. You need to use the success method.
$('.categ-delete').click(function() {
$.ajax({
url: 'categoryactions.php',
type: 'POST',
data: {action: 'delete'},
success: function(data){
alert(data);
//or, put response in a div
$('#someDivId').html(data);
}
});
});
The point of Ajax is to retrieve the response from a request to another page without changing the URL in the address bar. It retrieves the response for you in the variable that is the input to your success method, and then you do something with that.
Example AJAX with PHP
I can't exactly answer your question, but I will help you understand ajax requests to http server and how to handle responses accordingly.
Sample jQuery
$('.categ-edit').click(function() {
$.get('/path/to/file.php', function(data) {
console.log(data);
});
});
Sample file.php
<?php
echo json_encode('HELLO');
I'm trying to get a javascript variable with ajax (and eventually get it to php).
I've tried several things. I'm trying to get the values of a Jquery range slider as soon as the user changes it (to save the values later on). This is the javascript:
$("#slider").bind("userValuesChanged", function(e, data){
console.log( + data.values.min );
});
The log is outputting the right values as soon as I change the minimum slider.
Now I'm trying to get this userValuesChanged with ajax:
$.ajax({
type: "GET",
dataType: "json",
url: "test.php",
data: "{userValuesChanged}",
async: false,
success: function(data){
alert(data);
return true;
}
});
Well as this is my first time using ajax, this is not working. I'm not sure how to write the right value at the data tag. How to get the userValuesChanged? Or the specific + data.values.minv value?
In your ajax call, you're just sending the string "{userValuesChanged}".
If you want to send new values, you specify those in an object:
$("#slider").bind("userValuesChanged", function (e, data) {
$.ajax({
type: "GET",
dataType: "json",
url: "test.php",
data: { minValue: data.values.min },
async: false,
success: function (data) {
alert(data);
return true;
}
});
});
The key bit above is:
data: { minValue: data.values.min },
...which creates an object with a property called minValue which is set to the value of the data.values.min you receive from the scroller. Your server-side script would look for a field called minValue. (Naturally if you also want other values from data.values, you can include them as well.)
Doing that every time the slider changes may be a bit much, though. If the userValuesChanged event only fires once, when the values have stopped changing, then the above is absolutely fine. If it fires continually when the user is moving the scroller, that wouldn't be good, because you'd be triggering a lot of ajax calls.
If that's the case (that it fires repeatedly as the user changes the value), see if it offers a different event when the user stops making changes.
If it doesn't, you can rate-limit instead. Here's how to do that if necessary:
$("#slider").bind("userValuesChanged", function (e, data) {
saveNewValues(data.values.min);
});
var pendingSaveTimer = 0;
function saveNewValues(minValue) {
// cancel any previous save we have pending
clearTimeout(pendingSaveTimer);
pendingSaveTimer = 0;
// Schedule saving the new value in half a second
pendingTimer = setTimeout(function() {
// Clear our timer var
pendingTimer = 0;
// Do it
$.ajax({
type: "GET",
dataType: "json",
url: "test.php",
data: { minValue: minValue },
async: false,
success: function (data) {
// Do something here if needed
}
});
}, 500); // 500 = 500 milliseconds = half a second
}
That waits half a second before saving a value, and cancels that save if a new value comes in within that half a second.
Try like
$.ajax({
type: "GET",
dataType: "json",
url: "test.php",
data: {userValuesChanged:userValuesChanged},
async: false,
success: function(data){
alert(data);
return true;
}
});
The data should be like {key : value} format while you sending the data through ajax
I've suddenly gotten a very strange "bug". Up to now, this script has worked like a charm. But all of the sudden the formData variable is not passed through jQuery.ajax, as if it does not exist.
The funny thing is that if I trigger an alert displaying the data, it all works. But as soon as I remove the alert, the php script tells me that formData index is missing.
I'm clueless to what causes this or how to solve it :-/
This works fine on my development server, but not on the production server.
jQuery('#btn_saveForm').live('click', function() {
var instance = 'update';
var brand_id = jQuery('#itemID').val();
// Get form data
var form_data = jQuery("#data_form").serialize();
// alert(form_data); //If I uncomment this, the script works...
//Process form data
jQuery.ajax({
url: siteURL +"/wp-content/themes/my_theme/include/jquery.php",
data: {
instance : instance,
formData : form_data,
brandID : brand_id
},
success: (function(feedback) {
showFeedback(feedback);
}),
dataType: 'json'
});
});
My guess would be that putting the alert() in allows the form_data and brand_id variables to be filled completely before the AJAX request is sent. With that in mind, try this:
jQuery.ajax({
url: siteURL +"/wp-content/themes/my_theme/include/jquery.php",
data: {
instance : instance,
formData : jQuery("#data_form").serialize(),
brandID : jQuery('#itemID').val()
},
success: (function(feedback) {
showFeedback(feedback);
}),
dataType: 'json'
});
Alternatively, just to test, you could set async: false on the AJAX call to see if that makes a difference.
try to restart browser / change browser to another and see whats happening then
If it's true that you have some races here (which would be very strange, as js is single-threaded), the following should help you:
setTimeout(function() {
jQuery.ajax({
url: siteURL +"/wp-content/themes/my_theme/include/jquery.php",
data: {
instance : instance,
formData : form_data,
brandID : brand_id
},
success: (function(feedback) {
showFeedback(feedback);
}),
dataType: 'json'
})
}, 0);
The 0-timeout construction will put your code at the end of execution queue.