2011-06-26 11 views
8

私は製品、ユーザー、および類似のモデルを持っています。ユーザーは製品を好きになることができます。私は、クリックすると、ユーザーが製品を好きになるようなシンプルなボタンを実装しようとしています。その後、同様のボタンは、異なるボタンに変換され、ユーザーは製品と異なることができます。かなり簡単。レール3、jquery、ajaxのシンプルな/違うボタン

私は上記のモデル/コントローラロジックを実装しました。私はjavascript/ajaxにはあまりよくないので、上記の機能を実装するのに最善の方法があるのだろうかと思っていました。私はlike/unlikeアクションをajax経由で処理する必要があります。私は私のアプリのためにレール3とjquery ujsを使用しています。

ありがとうございました。

答えて

36

あなたの質問に対する私の答えは長いので、example applicationを書きました。スニペットは次のとおりです:

この猫をスキンする方法はたくさんありますが、私は部分的かつ単一のujsテンプレートをレンダリングするのが好きです。

_like_button.html.erb

"#like"フォームを囲むdiv要素である
<% if like = current_user.likes.find_by_product_id(@product.id) %> 
    <%= form_for like, :html => { :method => :delete }, 
        :remote => true do |f| %> 
    <%= f.submit "Unlike" %> 
    <% end %> 
<% else %> 
    <%= form_for current_user.likes.build(:product_id => @product.id), :remote => true do |f| %> 
    <%= f.hidden_field :product_id %> 
    <%= f.hidden_field :user_id %> 
    <%= f.submit "Like" %> 
    <% end %> 
<% end %> 

toggle.js.erb

、:

$("#like").html("<%= escape_javascript render('like_button') %>"); 
+1

男、あなたはこれをしなかったことをそのように素晴らしいです。あなたのサンプルアプリケーションは、これがどのように機能するかを理解する助けになりました。 Thx a ton! – p01nd3xt3r

+0

あなたの優しい言葉をありがとう! – dwhalen

+1

@dwhalen、私はもはやリンクされたサンプルアプリケーションを見つけることができません。私は私のアプリケーションで同じことをしようとしています、私は私のアプリケーションでほぼ同じコードを持っています。最初はすべてうまく動作し、Likeボタンが表示され、クリックすると違うところに切り替わります。しかし、違うボタンをクリックしようとすると、何も起こりません。助言がありますか? – Anand

1

基本的には、あなたのリンクをAJAX経由で動作させるには、link_to:remote => true引数を指定するだけです。しかし、あなたはユーザーに何らかのフィードバックをしたいと思う。 thisスクリーンキャストをご覧ください。

関連する問題