JSON shown instead of HTML for rails view using ember.js

Question

I'm slowly moving my rails website from a traditional rails round-trip-for-each-view application to one that will eventually be single page ember.js based. As part of this migration, I'm doing it in steps and not migrating the whole app in one go to a single page app but section by section at first.

I'm stumped on one problem that seems general. When I use the same controller for JSON views as well as HTML views, pressing back in Chrome occasionally shows me the JSON view instead of the HTML view.

For instance, I have an endpoint /portfolio/13, which is the entry point into one of these section ember.js apps and which causes Ember Data to pull the JSON for Portfolio with the id of #13 over the same endpoint with application/json as the Accept: header. Pressing back after forward navigating to deeper page will get the JSON representation of the page instead of the HTML.

Do I need to force Ember Data to use the format parameter such that the JSON version is at a different URL? If so, how does one do that?

What am I doing wrong?

Answer 1

Try adding this somewhere in your Javascript:

$.ajaxSetup({cache: false});

It should fix the problem. However, something is wrong here, because by default browsers don't cache JSON. Probably, this is because of the wrong content type, that is, Rails is serving JSON as HTML.

Answer 2

Are you having some headers set as "application/json" in your rails app? Could you trace the network response headers and see the content-type: value?

Is the "whole" page displaying as JSON? ( meaning not parsing HTML )

I had this problem once using sinatra and I had a ( very stupid ) :

before do 
    content_type 'application/json'
end

If you want your browser to display correctly, it has to be 'text/html' for all your HTML pages.

It might be your problem at some places in your rails app. ( But why haven't you had this problem before ember? )