I got inspiered by Makenzie Child video and github repo to create a masonry effect on my rails app.
I have a little problem, when I visit the page, the behavior is not the expected one, all the boxes are below each others, and if I reload they take the good behavior... I would like that the good behavior could display when we arrive on the page.
I don't know any javascript please dont be mad at me :)
this is the progresses.js.coffee
$ ->
$('#progresses').imagesLoaded ->
$('#progresses').masonry
itemSelector: '.box'
isFitWidth: true
application.js
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require masonry/jquery.masonry
//= require turbolinks
//= require_tree .
views/progresses/index.html.slim
.container
.section
.row
.col-xs-12
h1.text-gold
|Work In Progress [
= #progresses.count
| ]
hr
#progresses.transitions-enabled
- #progresses.each do |progress|
.box.panel.panel-default
= link_to (image_tag progress.main_image.url), progress
.panel-body
h4.text-gold = progress.title.upcase
h5 = progress.date
small = truncate(progress.content, length: 150)
Thanks for your help,
regards
The fact that it works when you reload the page makes me suspect this is a turbolinks problem.
Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.
So you'll visit the page using a link within your application, the javascript doesn't reload. But when you do a refresh on the page, everything is fetched again including the javascript causing the script to execute.
Solution 1
This also means things like $(document).ready(function(){ won't work because this only fires on initial load. Try something like this out:
ready = ->
$('#progresses').imagesLoaded ->
$('#progresses').masonry
itemSelector: '.box'
isFitWidth: true
$(document).on('page:load', ready)
I'm assuming you're using rails 4, this won't work in rails 5. I've used the following question for information and there are ways described to do this in rails 5: Rails 4: how to use $(document).ready() with turbo-links
Turbolinks will trigger the page:load event when a new page is loaded.
Solution 2
Another solution might be using jquery-turbolinks gem.
It's easy to use. Add gem 'jquery-turbolinks' to your gemfile. Then add //= require jquery.turbolinks to your application.js. This has to go between //= require jquery and //= require jquery_ujs. So in your case:
//= require jquery
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require jquery_ujs
//= require masonry/jquery.masonry
//= require turbolinks
//= require_tree .
If any of this doesn't work, you might want to disable turbolinks for a moment to see if turbolinks is actually the problem.
You can do this by replacing the <body> tag in your application.html.erb with the following: <body data-no-turbolink="true"> Just note that disabling turbolinks for your whole application isn't something you'll want. There are clean solutions to disable it for a specific page.
EDIT
If the following solution works for you, you can try this instead of the code I gave in solution 1:
$(document).on('turbolinks:load', function() {
...your javascript goes here...
});
In my opinion this is a lot cleaner and I've read that it should work from rails 4.2 and above. Notice the difference: turbolinks:load instead of page:load.
So I go it to work with
ready = ->
$('#progresses').imagesLoaded ->
$('#progresses').masonry
itemSelector: '.box'
isFitWidth: true
$(document).on('turbolinks:load', ready)
As I mentionned in my first comment my boxes were overclapped because I missed the indentation on the line $('#progresses').masonry
Now It works perfectly
Thanks again for all
Related
I'm trying to integrate a tool that I have developed in JS using kineticjs in a ruby on rails application. But I'm facing with a problem. Where should I put the kineticjs framework?
At the moment I have done this:
But I'm always getting this:
Uncaught ReferenceError: Kinetic is not defined
How should I include the kineticjs framework?
Edit:
Application.js looks like this:
//= require jquery
//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
drawingcanvas.js refers to kineticjs:
var rect = new Kinetic.Rect({
x: 0,
y: PALETTE_HEIGHT,
...
I use the container id of a canvas element to do this:
var stage = new Kinetic.Stage({
container: 'container',
width: CANVAS_WIDTH,
height: CANVAS_HEIGHT
});
Taking some guesses:
Am assuming that you are using the default //= require_tree . as the last line in application.js.
Your drawingcanvas.js refers to kineticjs.
somehow the default or your setting requires an element with id='container' to be present in the DOM.
Looks to me like there are multiple issues, if the above are correct.
The require_tree loads the javascripts in an order, and drawingcanvas.js is loaded before the dependencies are loaded. You also need to setup the dependencies for Kineticjs, example set the right container that it can bind to.
To avoid the order of loading affect the dependency, you can wait for the document.onload event, or $(document).ready if you are using jquery and then do the bindings.
EDIT 1:
Here is an example inn Rails that I put together, based on the html example on KineticJs website.
Things to look at:
routes.rb - The root is mapped to Home controller, Index action.
home.js - This is where the javascript logic to generate the Tango example goes.
home.html.erb - Include page specific javascript block, to include reference to kinetic.js.
See it in action by running it.
I'm using RoR and jquery.ui.addresspicker.js
This jquery.ui.addresspicker.js requires that google is loaded before that library is loaded. I only need the addresspicker on a couple of pages in the application.
The google part that needs to be loaded before is this:
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
But this makes the page load slower so I don't want this on all my pages.
The application.js contains this:
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require jquery.blockUI
//= require select2
//= require cocoon
//= require_tree .
Currently the jquery.ui.addresspicker.js file is in app/assets/javascripts and thus also loaded automatically all the time.
How can I handle this? Should I move the addresspicker.js out of the javascripts directory? Should I rewrite my application.js? Other suggestions?
You can replace
//= require_tree .
with an explicit list of the javascripts that you want included on each page. and just include jquery.ui.addresspicker on the pages that you need it.
I used Ian's idea to change the application.js
I created a new folder named sitewide and copied all the javascripts in there that I want to use on the whole site (so not the addresspicker).
I changed application.js like this:
//= require_tree ./sitewide
And in the page where I needed the addresspicker I put it using javascript_include_tag
This way I don't need to change the application.js file everytime I want to add a js file.
use a different layout on both pages or just remove the jquery.ui.addresspicker.js from the default_layout and just include in the pages where you need it
<%= include_javascripts "jquery.ui.addresspicker" %> or
javascript_include_tag "jquery.ui.addresspicker"
in the page where you need
Bootstrap datepicker just won't work for me. I know this question has been asked before but after searching a long time I could not find an answer.
I have the following configurations. When loading the page, the input field appears but no calendar to select appears when clicking on the field. Any help is very appreciated.
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require prototype
//= require prototype_ujs
//= require effects
//= require dragdrop
//= require controls
//= require bootstrap-datetimepicker
//= require bootstrap-datepicker
//= require_self
$('[data-behaviour~=datepicker]').datepicker()
application.css
/*
*= require_self
*= require_tree .
*= require bootstrap-datepicker
*/
custom.css.scss
#import "bootstrap";
#import 'bootstrap-datetimepicker';
and in the view
<input type="text" data-behaviour='datepicker' >
I have tried a couple of variations suggested in other topics on stackoverflow, but none of them worked. E.g.,
$(function() {
$('#dp5').datepicker()
});
together with
<input class="span2" id="dp5" readonly="" value="02-02-2012" size="16">
does not work neither.
Have you tried this gem: https://github.com/lubieniebieski/bootstrap-datetimepicker-rails ?
It will pack your Javascript and CSS required for datetimepicker into rails asset pipeline properly.
This problem happens because of the jquery version in your case
//= require jquery
Try downloading another version of the jquery and replace your current one. I had the exact same problem and that was the solution. Try with versions 1.5 or 2.0 or something like that.
Also, please note that by:
//= require_tree .
You are including .js files from the javascript directory, so please be sure that you haven't downloaded another version of jquery and you are automatically including second version also. You will have conflict issues.
If it all doesn't work you can try to look at the answer here also jQuery in Rails 3.2 not displaying datepicker
Important:
Make sure when you are testing to refresh your page with ctrl+ F5 ! It will refresh the whole page from the beginning and it will not include cashed elements and this is very important as you might find a solution, but due cashing you will not notice the change and you could miss the solution only because of the cashing.
This is driving me absolutely bonkers, and it seems like such a simple thing to implement. I can't get tooltips (or, for that matter, popovers) to work. I have the 'twitter-bootstrap-rails' gem installed, and I generated the appropriate .js and .css files.
I don't think it's a JQuery issue because I have other JQuery functionality on my site that works perfectly.
Here's some relevant code.
application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-tooltip
//= require bootstrap-popover
//= require prototype
//= require prototype_ujs
//= require effects
//= require dragdrop
//= require controls
//= require_tree .
$('a').tooltip();
application.css
*= require_self
*= require_tree .
*= reqire_twitter/bootstrap
Code I'd like to get to work for tooltips
test
The above code, when hovered over, just shows Chrome's normal tooltip. I'm getting the same behavior in Safari, so I doubt it's browser-specific.
I'm using Rails 3.2.7, adding Bootstrap manually. Everything works just fine.
application.css
*= require style
*= require bootstrap.min
*= require bootstrap-responsive.min
*= require_tree .
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
$(document).ready(function(){
$('a').tooltip();
});
//= require_tree .
and layout/application.html.erb
<head>
<%= stylesheet_link_tag("application", :media => "all") %>
</head>
<body>
<%= yield %>
<!-- scripts concatenated and minified via build script -->
<%= javascript_include_tag "application" %>
<!-- end scripts -->
</body>
</html>
Your application.js code will be executed before your web page is fully loaded into the browser, so your line of code will not find any element prior to the page load.
You will need to execute when the DOM is fully loaded:
$(document).ready(function () {
$('a').tooltip();
});
The solution to this was two-fold.
Change the $ in the code to jQuery. This got rid of the "Object # has no method 'ready'" error.
I had a bootstrap.js.coffee file that had irrelevant code. When I deleted the file, everything began working again. This got rid of the "Uncaught TypeError: Cannot call method 'tooltip' of null" error.
After much fighting, in order to get it working properly with Rails 3.2 I had to do the following:
in application.js:
//= require bootstrap
in the view template where I want the tooltip, include the rel='tooltip' attribute:
= link_to "Link text", title: 'Click to reveal tracks', 'data-placement' => 'top', rel: :tooltip
or if you're not using HAML:
Link text
in any of the coffeescript files (I created a new one) put this:
jQuery ->
$('[rel="tooltip"]').tooltip()
This works, though the styling for the tooltips are not working, I can't figure out why, but the javascript seems to be working at least.
Hopefully this will help someome else.
As someone commented already, bootstrap-sass includes a coffeescript file which has this in it:
jQuery ->
$("a[rel=popover]").popover()
$(".tooltip").tooltip()
$("a[rel=tooltip]").tooltip()
If you call this file there is no need to include the other coffeescript file above since this one does the same thing. In my case I already have bootstrap.js called from application.js so this one wasn't called (I removed require_tree so I can call the files I want in the order I want).
I thought this would be simple enough but somethings wrong. The only Bootstrap gem im using is the simple form one.
I have the following html:
app/views/users/new.html.erb
<div id="hint">hint</div>
And then in my application.js file for javascript I have:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min.js
//= require_self
//= require_tree .
//= require_tree ../../../vendor/assets/javascripts/.
$("#hint").popover({
title: 'A title!',
content: 'Some content!'
})
In the Twitter Bootstrap Tooltip Instructions it says to just put this:
$('#example').tooltip(options)
But I'm not getting anything. How do I use this?
ANSWER
I had to do this to get it to work:
<div id="hint">
hint
</div>
jQuery( function($) {
$("#hint a").tooltip()
});
I had the same problem once, and found that if I moved my $(example).tooltip() statement from the bottom of my .js file to the top, it started working. I never did figure out what is was about the JavaScript in the file that made the tooltip not work.
BTW, I am confused. Are you doing a tooltip or a popover? If it is a tooltip, you should have a link element, like this
<div id="hint">hint</div>
in your HTML and then
$("#hint a").tooltip()
in your JavaScript.