user3841024 user3841024 - 11 months ago 52
jQuery Question

Lightbox or Fancybox with Rails 4.1.4 only works after refresh

I'm trying to use lighbox or fancybox in my application without gems...

I already try put in assets/javascript and assets/stylesheet .js and .css files. But they only works when i refresh the page.

in my application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<script type="text/javascript" src=""></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script type="text/javascript">
$(document).ready(function() {


<link data-turbolinks-track="true" href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/home.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.fancybox.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/novidades.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script type="text/javascript" src=""></script>
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/home.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.fancybox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.fancybox.pack.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/novidades.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<script type="text/javascript">
$(document).ready(function() {

Whats is wrong?

Answer Source


Even though you mentioned you're doing this "without gems", it has all the hallmarks of an issue with turbolinks

In case you don't know, Turbolinks is a gem bundled with Rails to help load pages quicker. It does this by essentially pulling the <body> content of a page, leaving the <head> intact.

Although Turbolinks works very the majority of the time, it has one major flaw - because JS doesn't get refreshed when you load the page (as the head area of the page stays the same), JS generally doesn't "work" unless you refresh the page (and consequently refresh the <head> tag).



There are several ways to "fix" this - basically getting your JS to work with the Turbolinks refresh:

Firstly, you need to use the Turbolinks Events:

var fancybox = function(){
$(document).on("page:load ready", fancybox);

This should work for you. An alternative solution would be to use Javascript Delegation, although I don't think it would work with Fancybox in this instance