JQuery :: Code - Repeatable - With Firefox 3 And AJAX

I have found a problem with Firefox 3 and AJAX, and give code to replicate it below.

The problem is when you have a resource, e.g. /docs/1234, which is fetched both directly as a web page and as AJAX (XMLHttpRequest). The server detects these cases based on the X-Requested-With: XMLHttpRequest header, and sends back different content, e.g. just a raw div or wrapped in a full HTML page.

The problem is when you use a jQuery AJAX request to fetch the page again. If Firefox has /docs/1234 in its cache, then load('/docs/1234') wrongly gets the non-XHR version of the page, and this is the version it will insert into the DOM. This screws up the page, since you get a second copy of the layout wrapper HTML inside the original layout.

The code below replicates this:

- The home page (/) fetches /docs/1234 into the lower pane using XHR
- click on the link to fetch /docs/1234 as a full HTML page
- click back, and the main page ends up inserting the full /docs/1234

HTML into the lower pane

You can see that I've set a Cache-Control: header, which ought to prevent /docs/1234 from being cached at all, but that doesn't seem to make a difference. You can confirm it's present using curl -v [url]

This problem doesn't occur with Opera. Looking at the server logs, when you hit Back you see that $.load fetches a new copy of the page, so the AJAX request isn't using a local cached copy. (This is true even without setting the Cache-Control header) So arguably this is a Firefox problem. However, since part of the purpose of jQuery is to abstract away and compensate for browser differences, I thought I'd raise it here first.

The only workaround I can think of is to use a different URL for XHR requests, e.g. add '?xhr=true' to the end.

To run this code, you'll need ruby and 'gem install sinatra'