Geek Answers Handbook

Lightbox or Fancybox with Rails 4.1.4 only works after updating

I am trying to use lighbox or fancybox in my app without gems ...

I'm already trying to put in assets / javascript and assets / stylesheet.js and .css files. But they only work when the page is refreshed.

in my application 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>

What's wrong?

+4
source share
2 answers

Turbolniks

Even if you mentioned that you are doing it “without gems,” it has all the hallmarks of a problem with turbolinks

, Turbolinks - Rails, . , , <body> , <head> .

Turbolinks , - JS ( head ), JS , t "", (, , <head>).

-

Fix

"" - , JS Turbolinks:

-, Turbolinks Events:

#app/assets/javascripts/application.js
var fancybox = function(){
    $(".fancybox").fancybox();
};
$(document).on("page:load ready", fancybox);

. Javascript Delegation, , Fancybox

+6
<script type="text/javascript">    
    $(document).ready(function() {
        $(".fancybox").fancybox({
            parent : 'body'
        });
    });
</script>

add {parent: 'body'} !

+1

More articles:


All Articles