JSONP error on Safari - javascript

The following JSONP JQuery (v1.10.2) call works on all browsers except Safari:-
$.ajax({
cache: false,
type: 'GET',
url: userExistsUrl,
dataType: 'json',
error: function (jqXHR, textStatus, errorThrown) {
var errText = 'We are not able to process your request at the moment (' + textStatus + ', ' + errorThrown + ')';
console.error('HTTP response : ' + jqXHR.status);
console.error(errText);
displayError(errText);
},
success: function (xml) { }
});
On Safari the error function is invoked and the variable textStatus contains the string "error". However if I select the Developer menu option 'Disable cross-origin restrictions' the call works.
As this is just a standard JSONP call, how can I get it to work on Safari without invoking the developer option?

your dataType is wrong
dataType: 'jsonp'

Related

Cordova Ajax call throwing net::ERR_SPDY_PROTOCOL_ERROR

I have two Ajax calls but one of the Ajax calls are returning net::ERR_SPDY_PROTOCOL_ERROR.
The Ajax call urls are coming from WordPress Woocommerce RestApi.
When I run chrome in mode - chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security - the error disappears and everything is working correctly.
Error
Ajax call that is not working:
$.ajax({
url: "https://krii.000webhostapp.com/wp-json/wc/v2/products/categories?per_page=99",
success: function(json){
console.log("Success", json);
$.each(json, function (index, categories) {
//console.log(categories);
catego.push({Cat_Name: categories.name});
//console.log(catego);
$('select#categories2').append('<option data-id="> categories.id">'+categories.name+'</option>');
});
},
error: function (XMLHttpRequest, textStatus, errorThrown){
console.log(textStatus,errorThrown)
},
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Basic ' + btoa('ck_...:cs_...'));
},
type: 'GET',
contentType: 'json'
});
Ajax call that is working:
$.ajax({
url: "https://..../wp-json/wc/v2/products/categories?per_page=99",
success: function(json){
console.log("Success", json);
$.each(json, function (index, categories) {
//console.log(categories);
catego.push({Cat_Name: categories.name});
//console.log(catego);
$('select#categories').append('<option data-id="> categories.id">'+categories.name+'</option>');
});
},
error: function (XMLHttpRequest, textStatus, errorThrown){
console.log(textStatus,errorThrown)
},
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Basic ' + btoa('ck_...:cs_...'));
},
type: 'GET',
contentType: 'json'
});
How exactly I can fix this, cause it does not work on mobile device.
This error ERR_SPDY_PROTOCOL_ERROR is found in Google chrome. With latest updates of google chrome it is depracted. This protocol was added for faster web load and security. You can learn more from how-to-fix-err_spdy_protocol_error-in-google-chrome-2019

The $ajax http post method does not work with Firefox, but with safari and chrome instead

Can someone explain why this function does not work in firefox?
At first I thought it was a problem of form submission. So I reduced the code to the one performed at runtime function. Same problem with firefox: internal 500 server error. Thank you for your time.
<script type="text/javascript">
$(document).ready(function() {
var urls;
urls = "http://server/api/v1/update/discipline";
var data = {"id": "702","disciplinaNome":"John Doe 4"}
$.ajax({
url: urls,
type: "POST",
data: data,
contentType: "application/x-www-form-urlencoded",
success: function(responseData, textStatus, jqXHR) {
alert("data edited")
console.log("Data: " + responseData + "\nStatus: " + textStatus);
//if success close modal and reload ajax table
reload_table();
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("Data Error: " + errorThrown + "\nStatus: " + textStatus);
// alert('Error update data');
}
});
});
</script>
Firefox F5:
CHROME F5

ajax inconsistent on Safari

-EDIT-
I have tried to add some error handling to the failing function with error: function(jqXhr, status, error) but jqXhr.responseText is empty so I guess I'm still not handling errors properly.
-/EDIT-
I am new to ajax and have to modify an existing site with these two existing ajax functions, both of which are working fine in Chrome, IE and FF but only the first works in Safari. The second one fails but the error handler (which I guess wasn't set up properly?) doesn't tell me much:
// works in each browser
$.ajax({
cache: false,
type: 'GET',
url: apiBaseUrl + 'GetCountries',
dataType: 'xml',
success: parseCountries,
error: function(){
$('.errorMessage').append('<p>' + errorMessage + '</p>');
}
});
// does not work in Safari
$.ajax({
cache: false,
type: 'GET',
url: apiBaseUrl + 'GetStandardTexts?page=login',
dataType: 'xml',
success: displayRegisteredAlert,
error: function(jqXhr, status, error){
var err = eval("(" + jqXhr.responseText + ")");
alert(err.Message);
}
});
the only real difference between them that I can see is the URL in the second contains and additional parameter, ?page=login.
I finally got this to work. I'm not entirely sure why but adding async:false solved it for Safari. Not required for other browsers.
$.ajax({
async: false, // only required on Safari
cache: false,
type: 'GET',
url: apiBaseUrl + 'GetStandardTexts?page=login',
dataType: 'xml',
success: displayRegisteredAlert,
error: function(jqXhr, status, error){
var err = eval("(" + jqXhr.responseText + ")");
alert(err.Message);
}
});

AJAX cross-domain request IE 8+

How to correct rewrite the Ajax request to make it work in IE 8 +, using XDomainRequest?
$.ajax({
type: "GET",
url: url,
success: function(xml) {
$('.post-msg').append(processXml(xml, config));
},
error: function(jqXhr, textStatus, errorThrown) {
var errorMsg = "Request on url: " + url + " failed: " + textStatus + " error:" + errorThrown;
alert(errorMsg);
}
});
Use this plugin for IE8-9 Xdomain support.
https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest

Can I test if URL is reachable using AJAX + cross-domain + jsonp?

I'm using JQuery to fetch information from an URL and display it on my page asynchronously. The URL comes from other domain, so I use JSONP to get the data. That works fine.
However, when the remote URL is down (which happens once in a while) my page hangs as JQuery AJAX doesn't call the 'success' or 'error' functions.
I'm using JQuery 1.7.
My code looks like:
$.ajax({
type : "GET",
url : "http://otherdomain.com/somePage.html",
data : params,
dataType : "jsonp",
jsonp : "jsonp",
success : function (response, textS, xhr) {
alert("ok");
},
error : function (xmlHttpRequest, textStatus, errorThrown) {
alert("not ok " + errorThrown);
}
});
If "somePage" is up, then I see the message "ok". If "somePage" is not reachable, then I don't see anything.
Any ideas on how can I get "error" function get called? Or more importantly, how to detect if the cross-domain URL is reachable?
Is that even possible?
Thanks,
add a timeout
$.ajax({
type : "GET",
url : "http://otherdomain.com/somePage.html",
data : params,
timeout:3000,
dataType : "jsonp",
jsonp : "jsonp",
success : function (response, textS, xhr) {
alert("ok");
},
error : function (xmlHttpRequest, textStatus, errorThrown) {
alert("not ok " + errorThrown);
if(textStatus==='timeout')
alert("request timed out");
}
});
DEMO

Categories