firefox, jQuery ajax calls firing twice and never triggering success or error functions

Question

Hi,

I am developing with the .NET framework, using jQuery 1.4.2 client side.

When developing in Firefox version 3.6, every so often an one of the many ajax calls I make on the page will fire twice, the second will return successfully but will not trigger the success handler of the ajax call and the first never returns anything. So basically the data is all sent to the server and response is sent down but nothing happens with the response.

Here is an example of the call I am making. It happens to any of the ajax calls, so there is not one particular that is causing the problem:

$.ajax({
    type:"POST",
    contentType : "application/json; charset=utf-8",
    data:"{}",
    dataType:"json",
    success:function(){
      alert('success');
    },
    error:function(){
      alert('error');
    },
    url:'/services.aspx/somemethod'
 });

})

From firebug, here are the headers of the first call which in firebug shows as never completely responding, meaning i see no response code and the loader gif in the firebug never goes away.

Note:In firebug it usually says Response Header but for the first call this space is blank

Server             ASP.NET Development Server/9.0.0.0
X-AspNet-Version    2.0.50727   
Content-Type      application/json; charset=utf-8
Connection           Close

Request Headers

Host              mydomain.com
User-Agent        Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) 
                  Gecko/20100401Firefox/3.6.3 ( .NET CLR 3.5.30729)   
Accept        application/json, text/javascript, */*
Accept-Language   en-us,en;q=0.5
Accept-Encoding   gzip,deflate
Accept-Charset    ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive        115
Connection        keep-alive
Content-Type      application/json; charset=utf-8
X-Requested-With  XMLHttpRequest
Referer       http://mydomain.com/mypage.aspx

Here is the header from the second request which just appear to complete in firebug (i.e response is 200):

Response Header

Server  ASP.NET Development Server/9.0.0.0
X-AspNet-Version    2.0.50727
Content-Type    application/json; charset=utf-8
Connection  Close

Request Headers

Host        mydomain.com
User-Agent      Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3)          
                Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729)
Accept      text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive      115
Connection      keep-alive
Content-Type    application/json; charset=utf-8
Referer     http://mydomain.com/mypage.aspx

To summarize my question, why are two requests being made and why are neither of them triggering a success or error handler in the ajax call.

I have seen this article about firefox 3.5+ and preflighted requests

https://developer.mozilla.org/En/HTTP_access_control#Preflighted_requests

In the article is says if a "POST" is made with any other content type than "application/x-www-form-urlencoded, multipart/form-data, or text/plain" than the request is pre-flighted. If this is the case, this should happen to all of my calls.

Thanks

Answer 1

This isn't an answer as much as a proposed temporary workaround. Make the call synchronous with async:false and see if things work again.

I've been tearing my hair out over a similar-sounding bug recently.

Answer 2

I came across a similar problem recently trying to call a web service using $.getJSON. I could see the result coming back, i could see all the JSON data was there, i could also see the status code was 200 (OK). But the success callback was not being handled.

I ended up replacing the $.getJSON call with Sys.Net.WebServiceProxy.invoke. http://msdn.microsoft.com/en-us/library/bb383814.aspx

Looks like this:

Sys.Net.WebServiceProxy.invoke(webServiceURL, webMethodName, isAsync, { params }, function(data) {
    // do something with data
});