ブートストラップ テンプレートを購入し、それを Rails アプリに統合しようとしています。
順序付けられていないリストにいくつかのボタンがあります:
<ul class="filter-nav">
<li class="active"><a data-id="all" href="">All</a></li>
<% @categories.each do |category| %>
<li><a data-id="<%= category.name %>" href=""><%= category.name %></a></li>
<% end %>
</ul>
クリックされたときに画像を並べ替える:
<ul class="thumbnails" id="thumbnails">
<table>
<% @designs.each_with_index do |d, i| %>
<% strcategory = Category.find(d.category) %>
<% if i % 4 == 0 %>
<tr>
<% end %>
<td>
<li class="span3" data-id="<%=i+1%>" data-type="<%= strcategory.name %>">
<a href="<%=d.image_url.to_s%>" class="thumbnail">
<img src="<%=d.image_url(:thumb).to_s%>" alt="<%= d.name %>" />
<span class="caption"><i class="icon-plus-sign"></i></span>
</a>
<% if current_user %>
<%= link_to 'edit', edit_design_path(d) %> | <%= link_to 'delete', d, method: :delete, data: { confirm: 'Are you sure?' } %>
<% end %>
</li>
</td>
<% if i % 4 == 3 %>
</tr>
<% end %>
<% end %>
</table>
</ul>
ボタンをクリックすると、次のエラーが表示されます: Uncaught TypeError: Object [object Object] has no method 'quicksand' on Photographer.js file (最初の行):
$thumbnails.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
}, function() {
Shadowbox.setup("a.thumbnail");
});
$('.filter-nav li').removeClass('active');
$(this).parent().addClass('active');
return false;
});
assets/javascripts フォルダーに jquery.quicksand.js (バージョン 1.2.2) を含めます。他の誰かが同様の問題を抱えており、解決策は jQuery の 2 番目のコピーを削除することでした。2 つ目の jQuery ファイルを含めるかどうかはわかりませんが、少なくともアセットには何もありません。jquery.quicksand.js と jquery.easing.js だけです。これら 2 つのファイルを削除しようとしましたが、問題は解決しませんでした (そうするつもりだった場合)。
記録用の私のgemfileもここにあります:
gem 'rails', '4.0.2'
gem 'sqlite3'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'
gem 'bootstrap-sass', '~> 2.3.2.2'
gem 'devise'
gem 'figaro'
gem 'simple_form'
gem 'carrierwave'
gem 'rmagick'
gem 'thin'
何が間違っているのか、または他の情報が必要な場合はお知らせください。私のためにこれを探してくれてありがとう。