Back button doesn't re-trigger backbone app

Question

I'm running into a weird scenario in my Backbone Marionette app. If a user clicks on the facebook/twitter link and then clicks the browser back button, instead of re-loading my app it just displays the json as if I'd gone to example.com/posts.json instead of example.com/posts . If the user manually reloads the page it loads fine, but it's pretty confusing for the user to see the json.

If I'm on example.com/posts and then manually navigate away to say gmail.com and click the back button it works fine. It seems to be when a link within my app is clicked that this scenario arises.

Any idea how I can "force" the Backbone app to reload when the back button is clicked to navigate back into my app?

Edit:

Adding my Rails controller - it's hitting the index. But when hitting the back button it seems to be triggering the json vs. the html (though a refresh on the same page causes it to hit the correct html):

class SurveysController < ApplicationController    
  # GET /surveys
  # GET /surveys.json
  def index
    if cookies[:sample_user_id] && !User.find(cookies[:sample_user_id]).admin?
      if !cookies[:sample_appuser_token] 
        appuser = Appuser.create
        sign_in_appuser appuser
      else
        appuser = current_appuser
      end
      @surveys = User.find(cookies[:sample_user_id]).surveys.includes([:responses => [:choices], :questions => [:answers]])
    else
      if !cookies[:sample_appuser_token] 
        appuser = Appuser.create
        sign_in_appuser appuser
      else
        appuser = current_appuser
      end
      @surveys = Survey.where(status: "Submitted")
      if cookies[:sample_user_id]
        User.find(cookies[:sample_user_id]).surveys.each do |survey|
          @surveys << survey
        end
      end
    end
  end

And the index.html.erb view:

<div id="wrap">
  <div id="header-region"></div>
  <div id="main-region"></div>
  <div id="push"></div>
</div>
<div id="footer-region"></div>
<div id="dialog-region"></div>
<%= debug(params) if Rails.env.development? %>

<%= javascript_tag do %>
  $(function() {
    Sample.start({
      environment: "<%= Rails.env %>"
    });
  });
<% end %>

SurveysRouter:

@Sample.module "SurveysApp", (SurveysApp, App, Backbone, Marionette, $, _) ->

  class SurveysApp.Router extends Marionette.AppRouter
    appRoutes:
      ""            : "list"
      ":id"         : "show"
      ":id/take": "take"

  API =
    list: ->
      if $.cookie('sample_user_email') != null
        new SurveysApp.List.Controller
      else
        window.location = "/signin"

    show: (id) ->
      window.fragment = Backbone.history.fragment
      if $.cookie('sample_user_email') != null
        new SurveysApp.Show.Controller
          id: id
      else
        console.log Backbone.history.fragment
        window.location = "/signin" + "#" + window.fragment

    take: (id, survey) ->
      new SurveysApp.Take.Controller 
        id: id 
        survey: survey

    newSurvey: (surveys, survey) ->
      if $.cookie('sample_user_email') != null
        new SurveysApp.New.Controller 
          surveys: surveys
          survey: survey
      else
        window.location = "/signin"

  App.vent.on "survey:clicked", (survey) ->
    App.navigate "/" + survey.id
    API.show survey.id

  App.vent.on "new:survey", (surveys, survey) ->
    API.newSurvey surveys, survey

  App.vent.on "take:survey:button:clicked", (survey) ->
    App.navigate "/" + survey.id + "/take"
    API.take survey.id, survey

  App.vent.on "survey:list", ->
    App.navigate "/"
    API.list()

  App.addInitializer ->
    new SurveysApp.Router
      controller: API

List controller:

@Sample.module "SurveysApp.List", (List, App, Backbone, Marionette, $, _) ->

  class List.Controller extends App.Controllers.Application

    initialize: ->
        surveys = App.request "survey:entities"

        App.execute "when:fetched", surveys, =>
            @layout = @getLayoutView()

            @listenTo @layout, "show", =>
          @surveyRegion surveys
          @bannerRegion surveys

        @show @layout
        App.request "header:footer"

    surveyRegion: (surveys) ->
      surveyView = @getSurveyView surveys

      @listenTo surveyView, "childview:survey:clicked", (args) ->
        if args.model.get('status') == "Draft"
          App.vent.trigger "new:survey", surveys, args.model
        else
            App.vent.trigger "survey:clicked", args.model


      @listenTo surveyView, "childview:take:survey:button:clicked", (child, args) ->
        survey = args.model 
        survey.set(preview: true)
        App.vent.trigger "take:survey:button:clicked", survey

      @show surveyView, region: @layout.surveyRegion

    getLayoutView: ->
      new List.Layout

    getSurveyView: (surveys) ->
      new List.Surveys
        collection: surveys

    bannerRegion: (surveys) ->
      bannerView = @getBannerView surveys

      @listenTo bannerView, "new:survey:clicked", ->
        App.vent.trigger "new:survey", surveys

      @show bannerView, region: @layout.bannerRegion

    getBannerView: (surveys) ->
      new List.Banner
        collection: surveys

And the footer template where the links are:

<div class="container">
    <div class="row">
      <div class="col-sm-6 align-center">
        <a href="/privacy" id="footer-privacy-link">Privacy</a>
        <a href="/contact">Contact us</a>
        <div>©2014 Sample, LLC</div>
      </div>
      <div class="col-sm-4 align-center">
        <a class="facebook" href="https://www.facebook.com/sample"><i class="fa fa-facebook"></i></a>
        <a class="twitter" href="https://twitter.com/sample"><i class="fa fa-twitter"></i></a>
        <a class="email-link" href="/contact"><i class="fa fa-envelope"></i></a>
      </div>
    </div>
</div>

Answer 1

What you're describing makes it sounds like example.com/posts.json has been added as an entry to the browser's history. However, AJAX calls don't normally add to the history, so it seems like you must have an errant router.navigate or window.location = line, or something similar, in your code. However, without seeing the relevant code it's impossible to say for sure.