jQuery Masonry działa jedynie po odświeżeniu strony

Witam wszystkich,
Tworzę aplikację podobną do Pinterest’u lub polskiej Zszywki. Zależy mi na tym, aby obrazki wyświetlały się na stronie głównej z wykorzystaniem biblioteki jQuery Masonry. Niestety biblioteka ta działa jedynie tylko gdy wpiszę odpowiedni adres lub gdy odświeżę stronę, natomiast nie działa gdy wciskam link odnoszący się do tej strony - wtedy obrazki układają się tak jakby tej biblioteki nie było.
W czym może być problem? Bardzo proszę o poradę.


aplication.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require masonry/jquery.masonry
//= require_tree .


pins.coffee

$ ->
$(’#pins’).imagesLoaded ->
$(’#pins’).masonry
itemSelector: ‘.box’
isFitWidth: true


aplication.css

/*
*= require ‘masonry/transitions’
*= require_tree .
*= require_self
*/


pins.scss

#pins {
margin: 0 auto;
}

.box {
margin: 5px;
width: 214px;
}

.box img {
width: 100%;
}


index.html.erb

<% @pins.each do |pin| %>
<%= link_to image_tag(pin.image.url(:medium)), pin %> <%= pin.title %>
<%= pin.user.login if pin.user %>
<% end %>

gemfile

gem ‘rails’, ‘4.2.5’
gem ‘sqlite3’
gem ‘sass-rails’, ‘~> 5.0’
gem ‘uglifier’, ‘>= 1.3.0’
gem ‘coffee-rails’, ‘~> 4.1.0’
gem ‘devise’, ‘~> 4.3’
gem ‘jquery-turbolinks’
gem ‘masonry-rails’, ‘~> 0.2.4’
gem ‘paperclip’, ‘~> 5.1’
gem ‘will_paginate’, ‘~> 3.1’, ‘>= 3.1.6’
gem ‘will_paginate-bootstrap’, ‘~> 1.0’, ‘>= 1.0.1’
gem ‘jquery-rails’
gem ‘turbolinks’
gem ‘jbuilder’, ‘~> 2.0’
gem ‘sdoc’, ‘~> 0.4.0’, group: :doc
gem ‘bootstrap-sass’, ‘~> 3.3’, ‘>= 3.3.7’

group :development, :test do
gem ‘byebug’
end

group :development do
gem ‘web-console’, ‘~> 2.0’
gem ‘spring’
end

Używasz turbolinks więc musisz zmienić event listener w pins.coffee na:

document.addEventListener(“turbolinks:load”, function() {
//twoj kod
})

Więcej szczegółów -> https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

2 Likes

Zmieniłam pins.coffee na:

document.addEventListener ‘turbolinks:load’, ->
$(’#pins’).imagesLoaded ->
$(’#pins’).masonry
itemSelector: ‘.box’
isFitWidth: true

Dało radę !!! wielkie dzięki za wskazówki :wink:

1 Like