I have a mobile app running on jQuery Mobile/PhoneGap, and in iOS 5-only my ajax callback stops firing after a while. I'm using jQuery's $.ajax function, and here are some of the error messages I've got:
textStatus = parsererror
errorThrown = undefined was not called
In the second error above 'undefined' is my callback function. My question is, does Mobile Safari disable functions after a while if too many errors are thrown?
My guess as to what's occurring is that when a mobile device's connection is too slow, the JSON file I'm grabbing (214K) makes the AJAX call last too long (> 10s?), and Mobile Safari cancels the AJAX call. Then, after X number of cancelled AJAX calls, it seems like Mobile Safari disables the callback function completely.
Anyone else with similar behavior?
I use $.ajax often and have not experienced this problem. I suggest setting timeout to 50000 for a slow connection. To see the error, somewhere in your html add:
<div id='text1'>No Error yet...</div>
and timeout parameter would be added similar to:
$.ajax({
type: "GET",
url: "yourpage.html",
async: true,
cache: false,
timeout:5000,
success: function(data){
//something with the data
},
error: function(XMLHttpRequest, textStatus, errorThrown){
$("#text1").text("Comet Timeout ERROR: " + textStatus + " (" + errorThrown + ")");
},
});
Related
I am developing on a Samsung tablet which has default browser.
The ISS tells me this info : Mozilla/5.0+(Linux;+U;+Android+3.2;+en-us;+GT-P7500+Build/HTJ85B)
The ajax call keeps failing with Error 0 and no information when posting info to server. On every other browser it works without problems.
Any idea why ?
here is the code i use :
status is 0
end textStatus is undefined
$.ajax({
url: uri,
contentType: "application/json;charset=utf-8",
dataType: "text",
data: input,
type: 'POST',
error: function (jqXHR, textStatus, errorThrown) {
doShowError("Error:" + jqXHR.status + "--" + textStatus + "--" + errorThrown + "-"+ jqXHR.readyState);
}
}
Edit 1 : Mozilla/5.0+(Linux;+U;+Android+3.2;+en-us;+GT-P7500+Build/HTJ85B)+AppleWebKit/534.13+(KHTML,+like+Gecko)+Version/4.0+Safari/534.13 this is all I get.
Found a solution :
It seems that when doing things asynchronously in this Webkit browser, when receiving multiple chunks of data from a large response, the browser responds with status 0 which means error, instead of 206 which means partial result. The advice for my case is that we should used sync in order to fix the issue until this bug is fixed : http://code.google.com/p/android/issues/detail?id=14924 or this one http://bugs.jquery.com/ticket/8343
I'm having a problem with a page that works fine by itself, but when it's embedded in a iFrame in a corporate webpage (that I don't control) it chokes in IE9 (but not IE8).
The page uses jQuery to make an AJAX call and KnockoutJS to bind content for display. The page passes parameters in a GET request to my server with responds with AJAX, and it seems that it chokes when getting the data back from the server. The data is correct and correctly formatted, however, when this code executes:
$.ajax({
url: this.serviceURL + parameters,
dataType: 'json',
success: callback,
timeout: 3000,
error: function (jqXHR, status, errorThrown) {
if (status == "timeout") {
error("The connection to the server timed out.\nEither the server is down or the network is slow.\nPlease try again later.");
}
else {
error("An error occurred while trying to communicate with the server.\n " + errorThrown);
}
}
});
In IE9, I always hit the "An error occurred..." branch with the errorThrown of "SyntaxError: Invalid character", which tells me nothing.
Anybody got any suggestions on how to go about debugging this problem? I used Fiddler to look at what was being sent to and returned by the server, and everything looks fine on that end.
Update: After sleeping on it for a while, I started fresh today. What I've determined is that for some reason, when my page is iFramed, instead of getting the JSON response:
"{"Foo":true,"Bar":true}"
I'm actually getting (from forcing an error in the error handler so I could inspect the state of the jqXHR.responseText) is:
" {"Foo":true,"Bar":true}"
Which if, using the console, I try feeding to JSON.parse, gives me an error. So the question is, where the heck is that leading space coming from? If I run this in Firefox, I see the correct response from the server (no space) and if I run this outside of the iFrame, I see no leading space. So I don't think it's coming server side. Somewhere in the mess of JS running on the parent page and my page, it's inserting a leading space.
Update 2: A closer examination reveals that jqXHR.responseText.charCodeAt(0) is 65279, so it's not actually a space (although it displays as one) it is the byte order mark. But why is it there now (and not before) and why is it causing a problem?
I couldn't figure out the reason for this problem, so I hacked my way around it by adding a custom converter to my ajax call. So I now have this:
$.ajax({
url: this.serviceURL + parameters,
dataType: 'json',
success: callback,
timeout: 3000,
converters: { "text json": HackyJSONConverter },
error: function (jqXHR, status, errorThrown) {
if (status == "timeout") {
//alert("Timed out");
error("The connection to the server timed out.\nEither the server is down or the network is slow.\nPlease try again later.");
}
else {
error("An error occurred while trying to communicate with the server.\n " + errorThrown);
}
}
});
And my hacky converter looks like this:
function HackyJSONConverter(data) {
if (data[0] = 65279) {
// leading BOM - happens only with an iFrame in OT for some unknown reason
data = data.substring(1);
}
return JSON.parse(data);
}
It's immensely stupid, and I would be delighted if anybody has a better way!
I recently refactored some ajax code to make it asynchronous. It was working perfectly before, but I wanted to use jQuery promises, so I jQuerified it. Now, however, the ajax call works in every browser but IE.
IE9 throws the error where the ajax function is assigned a variable name. The error in IE is:
"Object doesn't support this method or property on line 99."
Here's a chunk where the error occurs:
if (screen.width > 525 && svgSupported) {
$loadingSvg = $.ajax({
type: 'GET',
url: 'images/mypicture.svg',
dataType: 'xml',
success: function(data){
console.log("Ajax request successfully returned: " + data);
console.log(data);
},
error: function(data){
console.log("Ajax request failed: " + data);
}
});
}
I've tried some obvious things other people in similar situations have suggested on SO, like wrapping everything in jQ $(document).ready. That doesn't fix it. The $loadingSvg variable is declared globally at the top of the script, so that ain't it. Any ideas, folks?
The issue is actually your console.log line:
console.log("Ajax request successfully returned: " + data);
More specifically, IE can't seem to concatenate an XML document with a string, or indeed XML anything with a string. They don't support .toString(). Just remove that part and continue working :)
I'm using JQuery 1.7.2, trying to do a cross site Ajax request which should return a html page via 4 redirects.
Not my ideal world with all those redirects, but it's part of the specification.
Now, using the following code:
$.ajax({
type: "GET",
url: myUrl,
dataType: "script",
success: function(data) {
alert("success :"+ data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("revoke: "+textStatus + ' / ' + errorThrown+"/"+jqXHR.status);
},
complete: function(jqXHR, textStatus){
alert("complete : "+jqXHR.statusText + ": "+jqXHR.readyState);
}
});
I can see in Firebug/Safari Developer Tools, that all the redirects work (e.g. returns a 302 status with a Location header).
Then the strange thing happens: At the last page, which returns a 200 status, my script ends and I try to view the data coming back. But the output is just "Undefined".
I agree on that I should not expect a script datatype when trying to get a html page, but when I tried with all the other datatypes (as defined in the jquery ajax page), the error handler is envoked and the status code is 0. All the while, in Safari DT, the status after the first redirect is just set as "(canceled)" (all the while the request just for the second redirect page just hangs in Firebug - but I'm just guessing that it has to do with their different implementation).
When I receive a 200 status, I can see in the debuggers that the last page has a size of some 18kb, which means that there should be some sort of data in it.
what to do?
You can't redirect with AJAX, you can only send and get data to and from the server.
For a redirection you have to use a "regular" HTTP request.
It can also be done with javascript window.location = myUrl
My problem happens to be the error, I am attempting to produce an error, in this case the error being hiding the loading symbol and showing a refresh button in order for the user to reload the page to see if the data loads this time.
$(document).ready(function () {
$('#busy').show();
$(document).bind('deviceready', function () {
var today = $('#todaysong');
$.ajax({
url: 'my url',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function (data, status) {
$.each(data, function (i, item) {
var song = '<name>' + item.name + '</name>' + '<artist>' + item.artist + '<br></artist>';
$('#busy').hide();
today.append(song);
});
},
error: function (error) {
$('#busy').fadeOut();
$('#reload').fadeIn();
}
});
});
});
This is my code, could someone advise on what I am doing wrong, I've tried a few things and cannot seem to get it to work, also would I make it so said button was able to refresh this individual piece of code?
Thanks a lot.
In order to debug your code:
Are you generating an error on your own? Is it really an error? Track your request via Firebug or ...
Be sure about running the error function. Again try Firebug or such things to set break points.
Check the JavaScript console for being sure there is no any of damn JavaScript error. And again Firebug error console.
Without seeing other details it is difficult to suggest.
Still I'm trying.. Check the IDs of the elements you have mentioned is same as they are in HTML. Check in HTML that one id is not assigned to more than one element.
In the AJAX code remove jsonp: 'jsoncallback', for a while and test if it is working.
error(jqXHR, textStatus, errorThrown)
A function to be called if the request fails. The function receives
three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a
string describing the type of error that occurred and an optional
exception object, if one occurred. Possible values for the second
argument (besides null) are "timeout", "error", "abort", and
"parsererror". When an HTTP error occurs, errorThrown receives the
textual portion of the HTTP status, such as "Not Found" or "Internal
Server Error." As of jQuery 1.5, the error setting can accept an array
of functions. Each function will be called in turn. Note: This handler
is not called for cross-domain script and JSONP requests. This is an
Ajax Event.
Where the important part in this case is;
Note: This handler is not called for cross-domain script and JSONP
requests.
Quote from the API documentation of jQuery.ajax.
You should instead be using jsonpCallback.