Menu
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?
506
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
126
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
parent : 'body'
});
});
</script>
add {parent : 'body'} work for me!
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
