Disclaimer: this may be completely obvious to front end wizards, of which I am not.

I ran into an elusive AJAX gotcha the other day: whenever I hit the ‘back’ button after completing a certain task on a current project, rather than see the page I’d just been on, I got a raw JSON payload that had been requested by that page. After some trial and error I think I’ve figured out what was going on:

As I gather, when a given URL (let’s say /foo) is requested normally by the browser and then via JSON, the browser decides to remember the last version it saw, which happens to be the JSON payload. This might happen in a Rails application if you had a controller method behaving differently based on request.xhr? So when you click ‘back’, rather than your finely crafted HTML and CSS, the browser returns tag soup. Not cool. I guess I’ve never run into this before since I’ve never before had an app with the sequence of GET /foo, GET /foo (the latter asking for JSON rather than HTML).

If you’re requesting the JSON via jQuery, a solution is straightforward. Setting the cache argument to false prevents the browser from overwriting the full HTML version of the page in its history. See http://api.jquery.com/jQuery.ajax/ for more.