Question

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

FORM

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

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

VIEW

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

CURRENT JS（不工作的OBVI）

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

整个snitch partial

  <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在这里使用＆＃34; delete-snitch＆＃34;）确认模态中的删除。

添加＆＃34; data-snitch-id＆＃34;该按钮的属性。您将需要该对象的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。

为您要删除的tr添加ID。

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

Answer 2

以下是一些步骤，因为我没有包含所有视图的完整源代码。

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

添加ajax以删除对象 - Rails

FORM

控制器

VIEW

CURRENT JS（不工作的OBVI）

整个snitch partial

2 个答案: