在 Rails 中，我如何在我的 AJAX JS 文件中知道单击了哪个按钮答案

【问题标题】：In Rails how can I tell in my AJAX JS file what button was clicked在 Rails 中，我如何在我的 AJAX JS 文件中知道单击了哪个按钮
【发布时间】：2020-04-24 21:36:16
【问题描述】：

在我的 Rails 应用程序中，我有一个视图 notify.html.erb，其中包含多个表单，这些表单是基于几个不同的模型（例如 Child.rb 和 Friend.rb）动态创建的。

notify.html.erb

<% @user.children.order("created_at").each do |child| %>
  <%= form_for(child, :method => :put, :remote => true)) do |f| %>
    <div class="notify-name"><%= child.name %></div>
    <%= f.email_field :email, :required => true, :placeholder => "Email Address", :class => "invite-email" %>
    <%= f.submit "Invite", :class => "btn btn-primary invite-user-btn" %>
  <% end %>
<% end %>

<% @user.friends.order("created_at").each do |friend| %>
  <%= form_for(friend, :method => :put, :remote => true)) do |f| %>
    <div class="notify-name"><%= friend.name %></div>
    <%= f.email_field :email, :required => true, :placeholder => "Email Address", :class => "invite-email" %>
    <%= f.submit "Invite", :class => "btn btn-primary invite-user-btn" %>
  <% end %>
<% end %>

表单设置为 remote => true 以便由 AJAX 处理。在每个控制器更新操作中，我都有：

children_controller.rb

def update
    child = Child.find(params[:id])
    email = params[:child][:email]
    if child.update(child_params)
      UserMailer.invite_new_user(current_user, child.name, email).deliver_later
      respond_to do |format|  
        format.html { redirect_back(fallback_location: documents_path) }
        format.js
      end  
    end
end

在我的 update.js.erb 文件中，我希望能够选择被点击的特定按钮。但正如您在我上面的视图中看到的那样，按钮没有什么独特之处（它们是根据用户拥有的孩子和朋友的数量动态创建的，并且它们每个都有相同的类）。如何获取被点击的按钮，以便更新该按钮的值？

【问题讨论】：

为什么不能在每个按钮上添加一个id，然后通过它来选择？
@hashrocket 我可以，但 id 是随机且不可预测的（每个用户会有不同数量的表单）。我怎么知道要在 js.erb 文件中引用哪个 ID 来选择适当的按钮？你有例子吗？

标签： javascript ruby-on-rails ajax

【解决方案1】：

添加一个带有子 ID 的隐藏字段

<% @user.children.order("created_at").each do |child| %>
  <%= form_for(child, :method => :put, :remote => true)) do |f| %>
    <div class="notify-name"><%= child.name %></div>
    <%= f.email_field :email, :required => true, :placeholder => "Email Address", :class => "invite-email" %>

    <%= f.hidden_field :id, value: child.id %>

    <%= f.submit "Invite", :class => "btn btn-primary invite-user-btn" %>
  <% end %>
<% end %>

这将在 params 中提交一个孩子的id

在控制器中

def update
  child = Child.find(params[:child][:id])
  email = params[:child][:email]

  if child.update(child_params)
    UserMailer.invite_new_user(current_user, child.name, email).deliver_later

    respond_to do |format|  
      format.html { redirect_back(fallback_location: documents_path) }
      format.js
    end  
  end
end

【讨论】：

【解决方案2】：

传递一个隐藏的文件，每个文件都用特定的值进行硬编码。然后您可以查看该参数

% @user.children.order("created_at").each do |child| %>
  <%= form_for(child, :method => :put, :remote => true)) do |f| %>
    <%= hidden_field_tag 'invitable_type', 'child' %>
    <div class="notify-name"><%= child.name %></div>
    <%= f.email_field :email, :required => true, :placeholder => "Email Address", :class => "invite-email" %>
    <%= f.submit "Invite", :class => "btn btn-primary invite-user-btn" %>
  <% end %>
<% end %>

<% @user.friends.order("created_at").each do |friend| %>
  <%= form_for(friend, :method => :put, :remote => true)) do |f| %>
    <%= hidden_field_tag 'invitable_type', 'friend' %>
    <div class="notify-name"><%= friend.name %></div>
    <%= f.email_field :email, :required => true, :placeholder => "Email Address", :class => "invite-email" %>
    <%= f.submit "Invite", :class => "btn btn-primary invite-user-btn" %>
  <% end %>
<% end %>

现在在您的update.js.erb 中，您可以像访问它一样访问它

<% if params[:invitable_type] == 'friend' %>
// you js code to enable button for friend
<% elsif params[:invitable_type] == 'child' %>
// you js code to enable button for child
<% end %>

【讨论】：