I know the title reads a bit funky, but this is what I am doing.
I have a link that looks like this, as defined in my nodes_helper.rb:
link_to(favorite_node_path(node, node_counter: node_counter), class: "card-favorite-count favorited", method: :post, remote: true, data: {toggle_href: unfavorite_node_path(node) }) do
concat(content_tag(:i, "", class: "icon-heart"))
concat(node.cached_votes_total)
end
That then ultimately, on success, leads to this /views/nodes/favorites.js.erb being executed:
$("#card-<%= @node_counter %> .card-attr").html('<%= favorites_count(@node, @node_counter) %>');
$("#card-<%= @node_counter %> .card-attr").append('<%= comments_count(@node) %>');
All of that works fine, but what I want to do is add some animation to the class card-favorite-count after the link is pressed. Basically, right before the count gets updated.
My animation is defined in my app/assets/javascripts/nodes.js.coffee like so:
animate_favorite = ($favorite) ->
$favorite.addClass 'active'
card = $favorite.parent().parent().parent()
card_id = card.attr('id')
setTimeout (->
$('#' + card_id).find('.card-favorite-count').removeClass 'active'
return
), 1200
return
$(document).ready ->
$('.card-favorite-count').click ->
animate_favorite $(this)
return
return
The JS version of the above works in a plain old vanilla HTML/JS interface, but I am trying to hook it up with everything else I have going on - hence the conversion to CoffeeScript.
So, how do I call that animate_favorite function, from within my favorite.js.erb?
Edit 1
Per Ryan's suggestion, I tried this in my favorite.js.erb:
window.animate_favorite($(this));
$("#card-<%= @node_counter %> .card-attr").html('<%= favorites_count(@node, @node_counter) %>');
$("#card-<%= @node_counter %> .card-attr").append('<%= comments_count(@node) %>');
But I get this error in my JS console:
window.animate_favorite($(this));
$("#card-1 .card-attr").html('<a class="card-favorite-count favorited" data-method="post" data-remote="true" data-toggle-href="/nodes/2/favorite" href="/nodes/2/unfavorite?node_counter=1" rel="nofollow"><i class="icon-heart"></i>1</a>');
$("#card-1 .card-attr").append('<span class="card-comment-count"><i class="icon-speech-bubble-1"></i>0</span>');
comments.self.js?body=1:5 parsererror
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire