Search code examples
jqueryruby-on-railsfancybox

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="http://code.jquery.com/jquery-latest.min.js"></script>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
        });
    </script>

output:

<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="http://code.jquery.com/jquery-latest.min.js"></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() {
            $(".fancybox").fancybox();
        });
    </script>

Whats is wrong?

Solution

  • Turbolniks

    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).

    --

    Fix

    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:

    #app/assets/javascripts/application.js
var fancybox = function(){
    $(".fancybox").fancybox();
};
$(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