CODEWITHSUNDEEP
javascriptruby-on-railscachingcoffeescriptturbolinks
Max L.
Max L.

Reputation: 274

Turbolinks, Rails, back button, footer from other source

I have an issue with turbolinks. When I click a 'back' button in browser there is one more footer appends.

In application.html.slim:

doctype html
html
  head
    title
      - unless content_for(:title).present?
        | Some text...
      - else
        == yield :title
    meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    - if admin_admin_signed_in?
      = stylesheet_link_tag    'cms/application', media: 'all', 'data-turbolinks-track': 'reload'
      = javascript_include_tag 'cms/application', 'data-turbolinks-track': 'reload'

I load a footer from the other source (application.coffee):

$(document).on 'turbolinks:load', ->
    $('footer').get(0).innerHTML = ''
    for src in ['//other_site.com/goc/us/other_site.com/responsive.js', '//other_site.com/footer-builder.js']
      s = document.createElement('script')
      s.async = true
      s.src = src
      document.getElementsByTagName('head')[0].appendChild s

Thanks for attention in advance!

Upvotes: 0

Views: 2246

Answers (2)

Max L.
Max L.

Reputation: 274

As @uzaif said you should put Turbolinks.clearCache()into your .js file for particular dom element or even page in similar situations. In my case I added the following peace of code this way:

application.coffee:

$(document).on 'turbolinks:load', ->
  $('footer').get(0).innerHTML = ''
  for src in ['//other_site.com/goc/us/other_site.com/responsive.js', '//other_site.com/footer-builder.js']
    s = document.createElement('script')
    s.async = true
    s.src = src
    document.getElementsByTagName('head')[0].appendChild s
  Turbolinks.clearCache()

Keep in mind it can reduce speed of page loading so make application profiling to be sure

Upvotes: 2

Dom Christie
Dom Christie

Reputation: 4240

By clearing the cache (as in https://stackoverflow.com/a/44398711/783009) you''ll be missing out on some of the performance benefits that Turbolinks offers.

@uzaif is correct in that the page is being cached. Here is what is happening:

  1. Page 1 loads
  2. Footer is loaded from other source
  3. User clicks on a link to page 2
  4. Turbolinks caches the page
  5. Page 2 loads
  6. User presses Back
  7. Turbolinks loads the cached page (with the footer)
  8. Footer is loaded again from other source :/

If you are adding HTML to a page on every page load, the idiomatic approach is to "teardown" the effects of any scripts on turbolinks:before-cache. It's a little tricky to write code for this without seeing what the footer scripts do, but the general idea is:

$(document).on 'turbolinks:load', ->
  # load your footer…

$(document).on 'turbolinks:before-cache', ->
  # teardown your footer

For more information on this, see here: https://github.com/turbolinks/turbolinks#preparing-the-page-to-be-cached

Alternatively, if the footer doesn't change between page loads, you may wish to only load the content once (e.g. on $(document).ready), then keep it between page loads. To do this, you'll need to give the footer an ID, and a data-turbolinks-permanent attribute. As long as the footer with the ID is in every response from the server, the footer content with be maintained. For more on this, see here: https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads

Upvotes: 1

Related Questions