sanjihan sanjihan - 22 days ago 8
Ajax Question

jQuery ajax works in Chrome, but not in Firefox or Safari

I implemented ajax request with

jQuery
. This is the code:

//initialize value, nameValue, emailValue

$.ajax({
url: "getPOST.php",
type: 'POST',
data: {
'id': value,
'name': nameValue,
'email': emailValue
},
success: function(response) {
console.log(response);
}
});


The code works fine in chrome, but it fails in Safari and in Firefox. I've seen some answers to this question, but they are 6 or more years old. What could be the fix for this problem?

EDIT: By fail I mean that on php side, nothing gets stored in database when run on Firefox or Safari, but it works as expected in Chrome. There is no error messages in console. The request in Safari is shown in red, and it didn't sent any data.

enter image description here

I inspected the post data in Firefox and they are as they should be. No errors there. Although the request is painted in red. This is how it looks. An error on the jQuery side?

enter image description here

I am using this code to send data to my server, before directing user to the PayPal payment page.

jQuery code. Hope I didn't delete to many braces.

// JavaScript Document
jQuery(document).ready(function($){
//you can now use $ as your jQuery object.



//real stuff here
$(".submit-link").click(function(e){
var value=$.trim($(".url-submit").val());

if(value.length>0){
value = encodeURIComponent(value);
var nameValue=$.trim($(".name-submit").val());
var emailValue=$.trim($(".email-submit").val());

if(nameValue.length>0){nameValue = encodeURIComponent(nameValue);}
if(emailValue.length>0){emailValue = encodeURIComponent(emailValue);}


$.ajax({
url: "getPOST.php",
type: 'POST',
data: {"id":value,"name":nameValue, "email":emailValue},
success: function(response) {
console.log(response);
}


//go to link in href now
});
}else{
var $urlSubmit = $('.url-submit');
$urlSubmit.addClass('invalid');
setTimeout(function(){
$urlSubmit.removeClass('invalid');
},500);

e.preventDefault();
}
});


//some other stuff

});

Answer

Got to long for a comment but try excluding jquery and try simple xhr/fetch to see if it works (maybe you will get a other understandable error if you try fetch)

fetch('getPOST.php', {
   method: 'POST',
   headers: {'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'}
   body: 'id=0&name=bob&email=bob%40localhost'
}).then(res => console.log(res))

(safari don't have fetch so try in firefox)

The only thing i can thing of is that you are posting cross origins... Are you posting to the same domain? Must be a network error/restriction cuz your code is valid

Comments