Botón de me gusta simple/diferente con rieles 3, jquery y ajax

Question

Tengo un producto, un usuario y un modelo similar. Un usuario puede gustarle un producto. Estoy tratando de implementar un botón similar simple que, al hacer clic, permite que un usuario le guste un producto. Luego, el botón Me gusta se transforma en un botón diferente que permite al usuario diferenciarse de un producto. Muy claro.

He implementado la lógica de modelo/controlador para lo anterior. No soy muy bueno con javascript/ajax y me preguntaba cuál sería la mejor manera de implementar la funcionalidad anterior. Quiero que las acciones like/unlike sean manejadas a través de ajax. Estoy usando rails 3 y jquery ujs para mi aplicación.

Gracias.

Answer 1

Mi respuesta a su pregunta es larga, entonces escribí un example application. Aquí hay un fragmento:

Hay muchas maneras de despellejar a este gato, pero me gusta hacer una plantilla ujs parcial y única.

_like_button.html.erb:

<% 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, donde "#like" es el div que encierra el formulario:

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

Answer 2

Básicamente, para hacer sus vínculos de trabajo a través de AJAX, sólo tiene que proporcionar link_to con :remote => true argumento. Pero supongo que quieres hacer algún tipo de comentario al usuario. Eche un vistazo al screencast de this.