406 Not Acceptable error when using Jquery $.post in Firefox but not in Safari or Chrome

Question

I'm using Jquery (1.3.2) $.post command to trigger an ajax call to a rails server.

The code works great on Safari and on Google Chrome (mac), but when I tried it on Firefox (3.5.7), I got a weird '406 Not Acceptable' error.

When I look at the headers, it Firefox indicated that it accepted only ' text/javascript' responses. And the response Content-Type was 'text/html; charset=utf-8'.

In Chrome the accepted types were 'application/json, text/javascript, /, text/javascript' and the response Content-Type was 'application/json; charset=utf-8'.

I tried to force the content type in rails to 'text/javascript'

format.json do
   render :json => @races.to_json, :content_type => 'text/javascript'
end

The content type is indeed changed in Chrome, but not in Firefox where it remains 'text/html'.

Here is the code I used to trigger the ajax call.

$.post(
    "/locator",
    params, 
    function(data){...},
    "json"
);

Is there something I can do to make this work in Firefox? Thanks

Answer 1

It doesn't make sense that different browsers see different HTTP headers. Perhaps this is a caching issue.

Answer 2

I'm using the contentType option during the $.ajaxSetup call to set the content type explicitly. That work's across browsers: http://api.jquery.com/jQuery.ajax/

Answer 3

Add a .json extension to your URL in the post call

$.post(
"/locator.json"
...

Or (possibly better) add the following to your application.js to set headers for all ajax requests

jQuery.ajaxSetup({ 
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} 
})

Answer 4

Had the same problem. It seems to be a firefox issue.

This works:

jQuery.ajaxSetup({ 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript,application/javascript,text/html")} })

Credit goes to this blog.

Best regards. Asbjørn Morell