添加用于删除对象的 ajax - Rails

Question

我目前有一个删除对象的简单 form_for。现在它是一个静态页面，每次删除对象时都会刷新。我们收到一个客户请求，希望索引页面在不刷新页面的情况下删除对象。显然 ajax 可以解决这个问题，但我对 javascript 的经验非常有限。如果有人能指出我正确的方向，我将不胜感激。为了清楚起见，这是我的代码。

表格

这是按下删除时弹出模式的表单。

 <%= link_to 'Delete', delete_snitch_path(snitch), rel: 'modal:open',
   data: { tooltip: "Delete" },
   class: 'icon icon-delete delete', title: "Delete #{snitch.name}" %>

-

 <%= form_for @snitch, html: { class: "form-actions", method: 'delete' } do |form| %>
 <span class="button-text"><%= link_to 'NO WAY!', home_base_url_or_default(root_path), rel: "modal:close" %></span>
 <input type="submit" class="button button--modal" value="Yes, delete it.">
 <% end %> 

控制器

  def destroy
    DestroySnitch.perform(snitch: @snitch)

    respond_to do |format|

      format.html do
        redirect_to snitches_path, notice: "Snitch was successfully deleted."
      end

      format.json do
        render json: @snitch.all
      end

    end
  end  

查看

<table class="snitch-list">
  <%= render partial: 'snitch', collection: @presenter.snitches %>
</table>

当前的 JS（不工作 OBVI）

$('ajax').bind('ajax:success', function() {
    $(this).closest('tr').fadeOut();
});

整个告密部分

  <tbody>
  <tr class="<%= snitch.classes %>">
    <td>
        <%= link_to "<span class='icon led'></span><span>#{snitch.name}</span>".html_safe, snitch_path(snitch), class: "name"%>
    </td>
    <td class="interval"><span class="vspace"><%= snitch.interval %></span></td>
    <td class="last-checked">
      <span class="vspace">
        <% if snitch.source.checked_in_healthy_at %>
          <span data-tooltip="Checked in healthy at UTC(<%= snitch.source.checked_in_healthy_at.to_i %>) || LOCAL(<%= snitch.source.checked_in_healthy_at.to_i %>)">
            Last seen <strong><%= snitch.checked_in_healthy_at(title: nil) %></strong>
          </span>
        <% else %>
          <strong><%= snitch.checked_in_healthy_at %></strong>
        <% end %>
      </span>
    </td>
    <td class="snitch-controls" data-icons="<%= snitch.pauseable? ? "5" : "4" %>">
      <%= render 'menu', snitch: snitch %>
      <nav class="snitch-states" >
        <% if snitch.pauseable? %>
          <%= link_to 'Pause', pause_snitch_path(snitch), class: 'icon icon-pause pause',
            data: { tooltip: "Pause" },
            rel: "modal:open" %>
        <% end %>

        <%= link_to 'Delete', delete_snitch_path(snitch), rel: 'modal:open',
          data: { tooltip: "Delete" },
          class: 'icon icon-delete delete', title: "Delete #{snitch.name}" %>
        </nav>
    </td>
  </tr>
</tbody>

我没有任何 javascript，我刚刚开始这个故事，但我在谷歌搜索时已经感到困惑。另外，有没有用 Rspec 和 Capybara 测试 ajax 的好方法？

Answer 1

在按钮上附加一个类（我的 ajax 在这里使用“delete-snitch”），以确认模态中的删除。

将“data-snitch-id”属性添加到该按钮。您将需要其中的对象 id 来删除正确的对象。

（这需要添加到modal中的按钮，被点击的那个。）

<button class="delete-snitch ...any other classes..." data-snitch-id="<%= snitch.id %>"> ... </button>

在您的 javascript 文件中输入如下内容

  $(document).on('click','.delete-snitch', function() {

    var snitchID = $(this).attr('data-snitch-id'); 
    $.ajax({
        type: 'DELETE',
        url: '/snitch/' + snitchID,
        success: function(){
            $('#tr-for-snitch-' + snitchID).fadeOut;
        }
    });
});

您必须确保 data-snitch-id 属性中包含 id 才能正常工作。

为您要删除的 tr 添加一个 id。

<tr id="tr-for-snitch-<%=@snitch.id%>" class="<%= snitch.classes %>">

Answer 2

这里有一些步骤，因为我没有你的完整源代码和视图。

1. 使用特定类创建一个 html 按钮。
2. 在向您的删除 API 发出请求的按钮上添加一个侦听器 ($('.button-class').click(sendDeleteRequest(e)))。 https://api.jquery.com/click/ 文档，如果您需要的话。
3. 在您的删除 API 响应成功 200 时，删除该项目。
4. 要删除项目，请使用 jquery 进行选择。 IE。 $('.class-of-object).remove();
5. 失败时，window.alert("Oops, that didn't work") 或 window.reload()