如何从作为AJAX调用的回调执行的js.erb触发JS函数？

Question

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

Edit 2

Per The F's questions, here is my controller for this action:

  def favorite
    @node.liked_by current_user
    @node_counter = params[:node_counter]
    current_user.events.create(action: "favorited", eventable: @node)

    respond_to do |format|
      format.js
      format.html{ redirect_to @node }
    end
  end

Edit 3

When I followed The F's suggestion of putting the JS I want to execute directly into my favorite.js.erb , everything works like I want it.

ie this is what my favorite.js.erb looks like now:

$("#card-<%= @node_counter %> .card-attr").html('<%= favorites_count(@node, @node_counter) %>');
$("#card-<%= @node_counter %> .card-attr").append('<%= comments_count(@node) %>');

$("#card-<%= @node_counter %> .card-attr .card-favorite-count").addClass('favorited active');
setTimeout(function() {
    $("#card-<%= @node_counter %> .card-attr .card-favorite-count").removeClass('active');
},1200);

So the question is, how do I get this to work within my Rails JS files? Which file do I put this function in so that I can just execute it in my favorite.js.erb and not in the declare it there?

Answer 1

Are you calling window.animate_favorite($('.card-favorite-count')); before inserting the node to the dom?

updated answer

Favourably you would return a json response that will hold the html partial you want to include and animate. Then you could listen for a successful ajax call from nodes.js.coffee that is triggered by favoriting one of the cards. To achieve this you should do some research on how to make efficient use of javascript. Maybe have a look at layouts & rendering and also passing data to javascript

For the moment I would keep the code as it is, as the amount of duplicated code is fairly small and it works the way you intend it to.

favorite.js.erb

$("#card-<%= @node_counter %> .card-attr").html('<%= favorites_count(@node, @node_counter) %>');
$("#card-<%= @node_counter %> .card-attr").append('<%= comments_count(@node) %>');

$("#card-<%= @node_counter %>").addClass('active');
setTimeout(function() { $("#card-<%= @node_counter %>").removeClass('active'); }, 1200);

Also, the js is not very consistent as you're passing $('.card-favorite-count') in your click function but wanted to pass your $('i.icon-heart') in your favorite.js.erb. You should try to always a similar selector ( card or icon ), unless there is a specific reason you were using the two. Sticking with one however, will also simplify your existing jquery.

Answer 2

You need to put them in the window namespace. Try something like this in your nodes.js.coffee file:

window.animate_favorite = ($favorite) ->
  ...code here...

Then, all you need to do to call it (in your favorite.js.erb file) is:

window.animate_favorite(...element you want to pass in...)