Rails controller renders JSON in browser

Question

I have a simple controller that I have responding to both html and json. I'm using the json response for a Backbone app. Everything works as expected, except that when I click a link that uses the show method, and then click the back button, the index method just prints a big string of JSON into the browser. If I refresh, it displays HTML as expected. Here's the controller.

class RecipesController < ApplicationController
  def index
    @user = User.find(params[:user_id])
    @recipes = Recipe.all

    respond_to do |format|
      format.html
      format.json { render json: Recipe.where(user_id: params[:user_id]).featured }
    end
  end
  ...
end

I tried adding a check for response.xhr?, and only rendering JSON if it was an AJAX request, but that didn't work.

Edit

This is a Rails 3 app not utilizing turbolinks.

Edit 2

Here is the relevant Backbone code.

# app/assets/javascripts/collections/recipe_list_.js.cofee
@App.Collections.RecipeList = Backbone.Collection.extend
  url: ->
    "/users/#{@userId}/recipes"
  model: window.App.Models.Recipe
  initialize: (opts) ->
    @userId = opts.userId


# app/assets/javascripts/app.js.coffee
$ ->
  urlAry = window.location.href.split('/')
  userId = urlAry[urlAry.length - 2]
  App = window.App
  App.recipeList = new App.Collections.RecipeList(userId: userId)
  App.recipeListView = new App.Views.RecipeListView

Answer 1

If you're referring to a chrome and turbolinks issue, then an easy fix is to disable caching on ajax requests:

$.ajaxSetup({cache: false})

Answer 2

you could try using /recipes.html and /recipes.json and /recipes/1.html and /recipes/1.json

instead of relying on backbone and history to always send the correct headers