We Keep Coding

Can't get long polling with jQuery and PHP to work

I'm been trying for many hours to get this working, just a basic long polling to a php script on the web server. I am testing it by having a text file which I check the last modified time of and compare it to the time the javascript sends a request. If the date of the file is newer then I send back a message "update". When I load the page in my browser it sends the request and waits as expected which I can verify using Chrome dev tools but then when I edit the file (ie. change the modified date) the update.php script never echos the update message. Instead it just continues until it times out.
I think it might have something to do with caching because if I copy the URL that the JS requests into a separate tab it also doesn't respond but if I change the random parameter that jQuery attaches to prevent caching I get the desired "update" message back. Any ideas what is wrong?
Thanks
The javascript running on the main page:
<script>
window.onload = function longPoll(){
var d = new Date;
$.ajax({
url: "http://localhost/site/update.php?time=" + d.getTime(),
success: function(data){
console.log(data);
},
error: function (xhr, ajaxOptions, thrownError) {
//error message here
},
type: "GET",
cache: false,
complete: longPoll,
timeout: 600000
});
}
</script>
The update script:
// while the file is NOT newer
while(!(filemtime('./test.txt') > $client_time)) {
sleep(1);
}
echo 'update';
?>

Somthing to keep in mind:
1: never trust what you got from client side like time.
2: The time you send to the server with client side is not really what you except, so if the user time is set wrong like 11 jun and in server your current time is 10 jun, the
filemtime('./test.txt') > $client_time
always return false
3: use clearstatcache() when you check file status
4: sleep(1) is too high, specially when you want to deploy high usage website, change that to more than 10 ms
5: as vher2 said, use this code for complete:
complete: function(jqXHR, status) {
if (status === 'success'){
setTimeout(function(){ longPoll() }, 1000);
}
}
Use this code to check current time on server and time time that received from user:
var_dump(time() , $client_time);

Try this:
complete: function(jqXHR, status) {
if (status === 'success'){
setTimeout(function(){ longPoll() }, 1000);
}
}

JQuery ajax method returning error during POST on Chrome

I have a web application written in ASP.NET MVC 4. Client side richly uses JQuery to perform requests to save and retrieve data, during the user experience. In certain moments the user can change some data and click a button-like link to save it. For architecture/performance/requirements restrictions, this process is made in two steps:
A POST request is sent to the server to a given URL (which will fire a certain action of a certain controller), containing a JSON object;
On the first POST success a timer is set to run a second POST to the same server, but different URL (another action in the same controller), with no content at all.
The second POST will just start a complementary process and conclude what was started by the first one. However, it never gets the server. The $.ajax method fires the error handler.
A simplified version of the first request code is
$.ajax({
url: self.opcoes.urlCreate,
type: "POST",
data: JSON.stringify(lancamento),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
self.LancarDia(250);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("Não foi possível incluir o lançamento. O servidor retornou\n" +
ajaxErrorMessage(jqXHR, textStatus, errorThrown));
}
});
The method LancarDia() receives the miliseconds amount to set the timer for the second request, so the idea is to wait 250 miliseconds and then send the second request. The LancarDia() code is:
MyClass.prototype.LancarDia = function (milisegundos) {
var self = this;
if (milisegundos) {
if (self.timerLancarDia)
clearTimeout(self.timerLancarDia);
self.timerLancarDia = setTimeout(function () {
self.LancarDia();
self.timerLancarDia = undefined;
}, milisegundos);
return;
}
$.ajax({
url: self.opcoes.urlLancarDia + self._dataAtual.format("MM/dd/yyyy"),
type: "POST",
success: function (data) {
if (self.opcoes.onLancou)
self.opcoes.onLancou(self._dataAtual);
},
error: function (jqXHR, textStatus, errorThrown) {
var mensagem = "Não foi possível atualizar o MUMPS. Motivo:\n" +
ajaxErrorMessage(jqXHR, textStatus, errorThrown);
alert(mensagem);
}
});
}
Notice that the first POST always work and the second fails many times but not always. When it fails what I get is:
jqXHR.status == 0
jqXHR.readystate == 0
textStatus == "error"
errorThrown == ""
In its first version, the code didn´t use any timers. On the success of the first POST the second was immediatly sent. Changing to the current implementation was reported to reduce the frequency of the problem, but it still happens.
Only Chrome shows this problem, FireFox and IE run clean.
Have anyone faced and solved this problem?
Thanks in advance

You mention the second POST never gets sent to the server, how are you verifying this? It sounds more like a race condition where the second request is being sent before the server is ready for it (e.g. it is still doing something that was started by the first request).

After a long study, our infrastructure staff figured out that the problem was caused by the caching policy of the browser (Chrome) and the caching policy configured in the web server (IIS 7).
After configuring IIS to add no-cache in the cache-control response header, the problem disapeared.

Ajax Timeout Not Working and Not Showing "Timeout" Status

I am trying to do a connection check for a form before it is submitted, when the button is clicked on. The idea is to look through a Timeout request "Timeout()..." which is not implemented yet in this code, and keep iterating through the Ajax until a connection is found, as sometimes out in the field the connection can drop. When a connection is found it will alert the user and will submit successfully if there was a dropped connection after hitting submit. Here is what I have so far:
function upload_prepformDiff() {
$.ajax({
type: 'POST',
url: './php/upload_prepform.php',
timeout: 2000, //2 seconds, for testing purposes
data: prepform,
async: false,//Omitted now as of this post
dataType: 'text',
success: function() {
alert("Your Prep form has been submitted.");
window.top.location.replace('./');
},
error: function (xhr, status, error) {
if(status == "timeout") {
alert("Internet connection has been lost! Please wait until you are notified and do not continue.");
} else {
alert(status + " " + error);
}
}
});
};
The issue is that even with a low timeout value, I do not get a "timeout" status message I get "error." So it never throws the timeout error I need and for error I get: Error: NETWORK_ERR: XMLHttpRequest Exception 101
So the ajax does notice there is no connection, but that is what the errorThrown shows, while the textStatus is "error" for (xhr, status, error) respectively. So what I TRIED doing was do a little improvising and do some type of error.indexOf() deal with the error string thrown in the Ajax, but that didn't work nor did error.contains("NETWORK_ERR") or any type of Regex command. Any ideas for improving this or why I am not getting a timeout? Thanks!

Guess this might be a bit late for you, but nevertheless...
If you have specified
async as 'false'
, the timeout property will be ignored.
As for handling the errors, you can visit an earlier SO question:
status of ajax or post request
Hope this helps! :)

ajax call aborted auto

Im having a very weird issue.
I have a normal ajax call that upload the avatar you choose from your pc up to the server..
this works sometimes, sometimes i can see in firebug under the Net that after some time loading, it gets "Aborted" and marked in red.
i even have a ajaxstart ajaxend loader icon and the icon keeps showing even when it gets aborted.
Why is this happening, and how can i prevent it from aborting? And maybe how can i make a "try again" if it got aborted?..why is it even aborted :S
Ive noticed it happening on bigger demension/size files? And on the file it request(fileupload.php) i do have a checker there, to callback an error if its bigger. But i think it does not even get to the file before it "lags" and stops..
Update confirmed: this occurs when i try to ajax send file with bigger size..

How are you sending files through Ajax? Ajax does not support sending files.
If it is a connection timeout in jQuery console it will show in red color and the failure handler of the ajax request will be called.
You can handle any conditions you want there. To remove timeout issue you can add a attribute timeout to your ajax request. I think the default value is 30 seconds
$.ajax({
url : "",
data : {},
success : function(data, textStatus, XMLHttpRequest){
},
error: function(XMLHttpRequest, textStatus, errorThrown){
if(textStatus == "timeout"){
alert("timeout")
}
},
timeout : 600000
});
Since you are using ajaxfileupload try this
$.ajaxFileUpload({
.....,
timeout: 60000,
error: function (data, status, e)
{
if(status == "timeout"){
alert("timeout")
}else{
alert(status)
}
}
})
And make sure that you does not have any max file upload size set in your server.

It probably got aborted because the request timed out on the client side. Increase the timeout in jquery.

How do I catch jQuery $.getJSON (or $.ajax with datatype set to 'jsonp') error when using JSONP?

Is it possible to catch an error when using JSONP with jQuery? I've tried both the $.getJSON and $.ajax methods but neither will catch the 404 error I'm testing. Here is what I've tried (keep in mind that these all work successfully, but I want to handle the case when it fails):
jQuery.ajax({
type: "GET",
url: handlerURL,
dataType: "jsonp",
success: function(results){
alert("Success!");
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert("Error");
}
});
And also:
jQuery.getJSON(handlerURL + "&callback=?",
function(jsonResult){
alert("Success!");
});
I've also tried adding the $.ajaxError but that didn't work either:
jQuery(document).ajaxError(function(event, request, settings){
alert("Error");
});

Here's my extensive answer to a similar question.
Here's the code:
jQuery.getJSON(handlerURL + "&callback=?",
function(jsonResult){
alert("Success!");
})
.done(function() { alert('getJSON request succeeded!'); })
.fail(function(jqXHR, textStatus, errorThrown) { alert('getJSON request failed! ' + textStatus); })
.always(function() { alert('getJSON request ended!'); });

It seems that JSONP requests that don't return a successful result never trigger any event, success or failure, and for better or worse that's apparently by design.
After searching their bug tracker, there's a patch which may be a possible solution using a timeout callback. See bug report #3442. If you can't capture the error, you can at least timeout after waiting a reasonable amount of time for success.

Detecting JSONP problems
If you don't want to download a dependency, you can detect the error state yourself. It's easy.
You will only be able to detect JSONP errors by using some sort of timeout. If there's no valid response in a certain time, then assume an error. The error could be basically anything, though.
Here's a simple way to go about checking for errors. Just use a success flag:
var success = false;
$.getJSON(url, function(json) {
success = true;
// ... whatever else your callback needs to do ...
});
// Set a 5-second (or however long you want) timeout to check for errors
setTimeout(function() {
if (!success)
{
// Handle error accordingly
alert("Houston, we have a problem.");
}
}, 5000);
As thedawnrider mentioned in comments, you could also use clearTimeout instead:
var errorTimeout = setTimeout(function() {
if (!success)
{
// Handle error accordingly
alert("Houston, we have a problem.");
}
}, 5000);
$.getJSON(url, function(json) {
clearTimeout(errorTimeout);
// ... whatever else your callback needs to do ...
});
Why? Read on...
Here's how JSONP works in a nutshell:
JSONP doesn't use XMLHttpRequest like regular AJAX requests. Instead, it injects a <script> tag into the page, where the "src" attribute is the URL of the request. The content of the response is wrapped in a Javascript function which is then executed when downloaded.
For example.
JSONP request: https://api.site.com/endpoint?this=that&callback=myFunc
Javascript will inject this script tag into the DOM:
<script src="https://api.site.com/endpoint?this=that&callback=myFunc"></script>
What happens when a <script> tag is added to the DOM? Obviously, it gets executed.
So suppose the response to this query yielded a JSON result like:
{"answer":42}
To the browser, that's the same thing as a script's source, so it gets executed. But what happens when you execute this:
<script>{"answer":42}</script>
Well, nothing. It's just an object. It doesn't get stored, saved, and nothing happens.
This is why JSONP requests wrap their results in a function. The server, which must support JSONP serialization, sees the callback parameter you specified, and returns this instead:
myFunc({"answer":42})
Then this gets executed instead:
<script>myFunc({"answer":42})</script>
... which is much more useful. Somewhere in your code is, in this case, a global function called myFunc:
myFunc(data)
{
alert("The answer to life, the universe, and everything is: " + data.answer);
}
That's it. That's the "magic" of JSONP. Then to build in a timeout check is very simple, like shown above. Make the request and immediately after, start a timeout. After X seconds, if your flag still hasn't been set, then the request timed out.

I know this question is a little old but I didn't see an answer that gives a simple solution to the problem so I figured I would share my 'simple' solution.
$.getJSON("example.json", function() {
console.log( "success" );
}).fail(function() {
console.log( "error" );
});
We can simply use the .fail() callback to check to see if an error occurred.
Hope this helps :)

If you collaborate with the provider, you could send another query string parameter being the function to callback when there's an error.
?callback=?&error=?
This is called JSONPE but it's not at all a defacto standard.
The provider then passes information to the error function to help you diagnose.
Doesn't help with comm errors though - jQuery would have to be updated to also callback the error function on timeout, as in Adam Bellaire's answer.

Seems like this is working now:
jQuery(document).ajaxError(function(event, request, settings){
alert("Error");
});

I use this to catch an JSON error
try {
$.getJSON(ajaxURL,callback).ajaxError();
} catch(err) {
alert("wow");
alert("Error : "+ err);
}
Edit: Alternatively you can get the error message also. This will let you know what the error is exactly. Try following syntax in catch block
alert("Error : " + err);

Mayby this works?
.complete(function(response, status) {
if (response.status == "404")
alert("404 Error");
else{
//Do something
}
if(status == "error")
alert("Error");
else{
//Do something
}
});
I dont know whenever the status goes in "error" mode. But i tested it with 404 and it responded

you ca explicitly handle any error number by adding this attribute in the ajax request:
statusCode: {
404: function() {
alert("page not found");
}
}
so, your code should be like this:
jQuery.ajax({
type: "GET",
statusCode: {
404: function() {
alert("page not found");
}
},
url: handlerURL,
dataType: "jsonp",
success: function(results){
alert("Success!");
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert("Error");
}
});
hope this helps you :)

I also posted this answer in stackoverflow - Error handling in getJSON calls
I know it's been a while since someone answerd here and the poster probably already got his answer either from here or from somewhere else. I do however think that this post will help anyone looking for a way to keep track of errors and timeouts while doing getJSON requests. Therefore below my answer to the question
The getJSON structure is as follows (found on http://api.jqueri.com):
$(selector).getJSON(url,data,success(data,status,xhr))
most people implement that using
$.getJSON(url, datatosend, function(data){
//do something with the data
});
where they use the url var to provide a link to the JSON data, the datatosend as a place to add the "?callback=?" and other variables that have to be send to get the correct JSON data returned, and the success funcion as a function for processing the data.
You can however add the status and xhr variables in your success function. The status variable contains one of the following strings : "success", "notmodified", "error", "timeout", or "parsererror", and the xhr variable contains the returned XMLHttpRequest object
(found on w3schools)
$.getJSON(url, datatosend, function(data, status, xhr){
if (status == "success"){
//do something with the data
}else if (status == "timeout"){
alert("Something is wrong with the connection");
}else if (status == "error" || status == "parsererror" ){
alert("An error occured");
}else{
alert("datatosend did not change");
}
});
This way it is easy to keep track of timeouts and errors without having to implement a custom timeout tracker that is started once a request is done.
Hope this helps someone still looking for an answer to this question.