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

Adding ajax for deleting an object - Rails

本文关键字：ajax Rails 对象用于删除添加更新时间：2023-09-26

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

形式

这是按下delete键时弹出模态的表单。

 <%= 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 %>

h2控制器

  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

<<h2>视图/h2>

<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的地方，我刚刚开始这个故事，但我已经感到困惑，而谷歌搜索。此外，是否有一个好的方法来测试ajax与Rspec和Capybara?

将一个类附加到按钮上(我的ajax在这里使用了"delete-snitch")，以确认模态中的删除。

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

(这需要添加到按钮在模态，一个被点击。)

<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才能正常工作。

为要删除的文件添加id。

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

这里有一些步骤，因为我没有你的整个源代码，包括视图和所有的

创建一个带有特定类的html按钮。
在向删除API发出请求的按钮上添加一个监听器($('.button-class').click(sendDeleteRequest(e)))。
当你的删除API响应成功200次时，删除条目。
要删除项目，使用jquery选择。ie。$('.class-of-object).remove();
故障时，window.alert("Oops, that didn't work")或window.reload()