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

How do I trigger a JS function from a js.erb executed as a callback on an AJAX call?

本文关键字：函数 JS AJAX 执行 调用 作为 回调      更新时间：2023-09-26

我知道标题读起来有点怪，但这就是我在做的。

我有一个链接，看起来像这样，定义在我的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

最终，如果成功，将导致执行此/views/nodes/favorites.js.erb:

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

所有的工作很好，但我想做的是添加一些动画类card-favorite-count链接被按下后。基本上，就在计数更新之前。

我的动画在我的app/assets/javascripts/nodes.js.coffee中定义如下:

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

上面的JS版本在一个普通的老式HTML/JS界面中工作，但我试图将它与我正在进行的其他一切联系起来-因此转换为CoffeeScript。

那么，我如何从favorite.js.erb中调用animate_favorite函数呢?

编辑1

根据Ryan的建议，我在我的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) %>');

但是我在JS控制台得到这个错误:

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

编辑2

根据F的问题，这是我对这个动作的控制器:

  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

编辑3

当我按照F的建议把我想要执行的JS直接放入我的favorite.js.erb中时，一切都像我想要的那样工作。

。这是我的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 %> .card-attr .card-favorite-count").addClass('favorited active');
setTimeout(function() {
    $("#card-<%= @node_counter %> .card-attr .card-favorite-count").removeClass('active');
},1200);

所以问题是，我如何让这个工作在我的Rails JS文件?我把这个函数放在哪个文件中，这样我就可以在我的favorite.js.erb中执行它，而不是在那里声明它?

在将节点插入dom之前是否调用window.animate_favorite($('.card-favorite-count')); ?

更新答案

最好你会返回一个json响应，它将保存你想要包含和动画的html部分。然后，您可以监听nodes.js.coffee成功的ajax调用，该调用是由收藏其中一张卡片触发的。要做到这一点，你应该对如何有效地使用javascript做一些研究。也许可以看看布局& &;渲染和传递数据给javascript

目前，我将保持代码的原样，因为重复代码的数量相当少，并且它按照您希望的方式工作。

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);

另外，js不是很一致，因为你在点击函数中传递$('.card-favorite-count')，但想在你的favorite.js.erb中传递你的$('i.icon-heart')。您应该始终尝试使用类似的选择器(card或icon)，除非有特定的原因使用这两个选择器。然而，坚持使用一个也将简化现有的jquery。

您需要将它们放在窗口命名空间中。在您的nodes.js.coffee文件中尝试这样做:

window.animate_favorite = ($favorite) ->
  ...code here...
然后，调用它(在favorite.js.erb文件中)所需要做的就是: 
window.animate_favorite(...element you want to pass in...)
相关文章：