質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Q&A

解決済

1回答

5199閲覧

(Rails/CoffeeScript)Ajaxによるブックマークアイコンの表示切り替えについて

mannnakakunn

総合スコア24

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

0グッド

0クリップ

投稿2015/12/30 06:48

編集2015/12/30 11:28

###前提・実現したいこと
Youtubeをスクレイピングをして動画まとめサイトを作っています。
下記サイトを参考にdeviseのuserがpost(私のコードではdog)をブックマークする機能を実装しようとしています。

Railsで簡単なブックマーク機能を作る
http://www.sahara-ja.com/posts/5

###発生している問題・エラーメッセージ

困っていることは、非同期通信自体ではなく、見た目についてのことです。

具体的にはshowアクション内の<%= link to...remote=true %> の部分がうまくいかず、クリックしてもアイコンの表示の切り替えがされません。

非同期通信によるデータベースへの登録・取消については成功しています。
(GUIツール(Sequel)でDBの状態をみると、データ登録はされており、非同期通信によるMySQLのDBへの変更は成功していることを確認しています。)

ページの再読み込みすると、アイコンも切り替わってくれますが、非同期に切り替わってくれないのです。

ご指導お願います。

###ソースコード

ruby

1 2#show.html.erb 3 4<div class="right"style="margin:10px; font-size:0.8rem;"> 5 <%= link_to dog_bookmarks_toggle_path(@dog) , id: 'bookmark-link', data:{remote:true} do %> 6 <%=raw bookmark_icon(@dog, current_user) %> 7 <% end %> 8</div> 9 10# application.js 11... 12//= require jquery 13//= require jquery_ujs 14//= require chartist 15//= require Chart 16#turbolinkはオフにしています。 17 18--- 19 20# show.html.erb 21 22<div class="right"> 23 <%= link_to dog_bookmarks_toggle_path(@dog) , id: 'bookmark-link', data:{remote:true} do %> 24 <%=raw bookmark_icon(@dog, current_user) %> 25 <% end %> 26</div> 27 28--- 29 30# bookmarks_helper.rb 31 32module BookmarksHelper 33 def bookmark_icon(dog_id, user) 34 if user 35 if user.bookmarks.exists?(dog_id: dog_id) 36 '<i class="fa fa-bookmark fa-2x"></i>' 37 else 38 '<i class="fa fa-bookmark fa-bookmark-o fa-2x"></i>' 39 end 40 end 41 end 42end 43 44--- 45 46# bookmarks.coffee 47 48bookmark_icon = -> 49 $("#bookmark-link").click -> 50 $(this).children('i').toggleClass('fa-bookmark-o') 51 52$(document).on('page:change', bookmark_icon) 53 54--- 55 56# bookmarks_controller.rb 57 58class BookmarksController < ApplicationController 59 def toggle 60 dog_id = params[:dog_id] 61 user_bookmarks = current_user.bookmarks 62 if user_bookmarks.exists?(dog_id: dog_id) 63 user_bookmarks.where(dog_id: dog_id).destroy_all 64 else 65 user_bookmarks.create(user: current_user, dog: Dog.find(dog_id)) 66 end 67 render :nothing => true 68 end 69end 70

###補足情報(言語/FW/ツール等のバージョンなど)

  • turbolinksをオフにしています
  • Rails4.2
  • Ruby2.2.2
  • MySQL

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

以下のように$(document).ready(bookmark_icon);を追加することで、発火させることができました。

$(document).ready(bookmark_icon);
$(document).on('page:change', bookmark_icon);

お騒がせいたしました。またよろしくお願いいたします。

投稿2016/01/05 22:28

mannnakakunn

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問