0

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

Endless
  • 34,080
  • 13
  • 108
  • 131

2 Answers2

1

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.

Community
  • 1
  • 1
Tijmenh
  • 141
  • 1
  • 9
  • Thanks for the time you spend answering me ! I tried all and actually it worked with doing this : `ready = -> $('#progresses').imagesLoaded -> $('#progresses').masonry itemSelector: '.box' isFitWidth: true $(document).on('turbolinks:load', ready)` But I have a new problem ... my boxes are overclaping now.... –  Aug 30 '16 at 19:31
  • ```$(document).on('turbolinks:load')``` worked for me on Rails 6 – Karim Mortabit Feb 08 '19 at 21:39
1

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