Javascript 更新a<；tr>；通过Ajax/jQuery在Rails中

我正在尝试更新我的列表项目后，点击我的模式更新

到目前为止，我所做的是在我的

上放置一个

id

和

contact.id

作为参考，然后在我的jQuery/Ajax上使用它

这是我的

\u listing.html.erb

：

<table class="table" id="contacts">
  <% contacts.each do |contact| %>
    <%= render partial: 'contacts/contact_item', locals: {contact: contact} %>
  <% end %>
</table>

<tr id="contact_item_<%= contact.id %>">
  <td class="middle">
    <div class="media">
      <div class="media-left">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
            <%= image_tag contact.contact_avatar.attached? ? contact.contact_avatar : "100x100.png", class: "media-object img-thumbnail img-rounded mr-3" %>
        <% end %>
      </div>
      <div class="media-body mt-2">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
             <h4 class="media-heading"><%= contact.name %></h4>
        <% end %>
        <address>
          <strong><i class="fa fa-map-marker"></i> <%= contact.city %>, <%= contact.state %>, <%= contact.country %>, <%= contact.zip %> </strong><br>
          <i class="fa fa-envelope"></i> <%= contact.email %> | <i class="fa fa-mobile"></i> <%= contact.mobile %> | <i class="fa fa-phone"></i> <%= contact.phone %>
        </address>
      </div>
    </div>
  </td>
  <td class="middle" width="100">
    <div class="mt-5">
    <%= link_to edit_contact_path(contact), class: "btn btn-outline-secondary btn-circle btn-xs", ":data-target" => "#new-contact-modal", ":data-toggle" => "modal", remote: true do %>
          <i class="fa fa-edit"></i>
      <% end %>

      <div class="btn btn-outline-secondary btn-circle btn-xs delete-contact" data-id="<%= contact.id %>">
        <i class="fa fa-times"></i>
      </div>
    </div>
  </td>
</tr>

<% if @success %>
  $('#new-contact-modal').modal('hide');
  $("tr#contact_item_<%= contact.id %>").html("<%= j render 'contacts/contact_item', contact: @contact %>");
  toastr.info('Contact was successfully updated.', 'info')
<% else %>
  $(".errors").removeClass('hide');
  <% @contact.errors.messages.each do |record| %>
    <% key = record.first %>
    var html = "<%= j get_error(@contact, key) %>";
    $(".error-<%= key.to_s %>").html(html);
  <% end %>

  $('#save-btn').removeAttr("disabled");

<% end %>

下面是我的

update.js.erb

：

<table class="table" id="contacts">
  <% contacts.each do |contact| %>
    <%= render partial: 'contacts/contact_item', locals: {contact: contact} %>
  <% end %>
</table>

<tr id="contact_item_<%= contact.id %>">
  <td class="middle">
    <div class="media">
      <div class="media-left">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
            <%= image_tag contact.contact_avatar.attached? ? contact.contact_avatar : "100x100.png", class: "media-object img-thumbnail img-rounded mr-3" %>
        <% end %>
      </div>
      <div class="media-body mt-2">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
             <h4 class="media-heading"><%= contact.name %></h4>
        <% end %>
        <address>
          <strong><i class="fa fa-map-marker"></i> <%= contact.city %>, <%= contact.state %>, <%= contact.country %>, <%= contact.zip %> </strong><br>
          <i class="fa fa-envelope"></i> <%= contact.email %> | <i class="fa fa-mobile"></i> <%= contact.mobile %> | <i class="fa fa-phone"></i> <%= contact.phone %>
        </address>
      </div>
    </div>
  </td>
  <td class="middle" width="100">
    <div class="mt-5">
    <%= link_to edit_contact_path(contact), class: "btn btn-outline-secondary btn-circle btn-xs", ":data-target" => "#new-contact-modal", ":data-toggle" => "modal", remote: true do %>
          <i class="fa fa-edit"></i>
      <% end %>

      <div class="btn btn-outline-secondary btn-circle btn-xs delete-contact" data-id="<%= contact.id %>">
        <i class="fa fa-times"></i>
      </div>
    </div>
  </td>
</tr>

<% if @success %>
  $('#new-contact-modal').modal('hide');
  $("tr#contact_item_<%= contact.id %>").html("<%= j render 'contacts/contact_item', contact: @contact %>");
  toastr.info('Contact was successfully updated.', 'info')
<% else %>
  $(".errors").removeClass('hide');
  <% @contact.errors.messages.each do |record| %>
    <% key = record.first %>
    var html = "<%= j get_error(@contact, key) %>";
    $(".error-<%= key.to_s %>").html(html);
  <% end %>

  $('#save-btn').removeAttr("disabled");

<% end %>

$（“#新联系人模式”）.model（'hide'）；
$（“tr#contact#u item#”）.html（“”）；
toastr.info（'联系人已成功更新'，'信息'）
$（“.errors”）.removeClass（'hide'）；
var html=“”；
$（“.error-”）.html（html）；
$（“#保存btn”）.removeAttr（“已禁用”）；

基本上，我正在尝试在更新后关闭模式，但在这种情况下，它根本不会关闭，我需要刷新页面以查看更新，这不是我试图做的，因为我使用ajax和jquery不进行刷新

---

任何人都可以看到我在这里遗漏了什么？

您不需要硬连接id-您只需从渲染模板中获取id即可。您也不希望插入整个渲染视图，因为这样会导致：

<tr id="contact_item_1">
  <tr id="contact_item_1">
      # ...
  </tr>
</tr>

# ...

而是将HTML另存为jQuery对象，并提取tr元素的id和innerHTML：

<% if @success %>
  $('#new-contact-modal').modal('hide');
  let $tmp = $("<%= j render 'contacts/contact_item', contact: @contact %>");
  $(document.getElementById($tmp[0].id)).html($tmp.first().html());
  toastr.info('Contact was successfully updated.', 'info')
<% else %>
  $(".errors").removeClass('hide');
  <% @contact.errors.messages.each do |record| %>
    <% key = record.first %>
    var html = "<%= j get_error(@contact, key) %>";
    $(".error-<%= key.to_s %>").html(html);
  <% end %>
  $('#save-btn').removeAttr("disabled");
<% end %>

$（“#新联系人模式”）.model（'hide'）；
设$tmp=$（“”）；
$（document.getElementById（$tmp[0].id））.html（$tmp.first（）.html（））；
toastr.info（'联系人已成功更新'，'信息'）
$（“.errors”）.removeClass（'hide'）；
var html=“”；
$（“.error-”）.html（html）；
$（“#保存btn”）.removeAttr（“已禁用”）；

您的

update.js.erb

在

联系人

前面缺少

@

。应该是这样的:

$（“tr#contact#u item”）html（“”）

您需要像这样更新
\u listing.html.erb
：


然后从
\u contact\u item.html.erb
中删除
行和最后一行

就这样。
可能比这更复杂。。。但是这里应该是
@contact.id
：
$（“tr#contact_item”）html（“”）我想这和我上面的代码是一样的。但是仍然无法工作。您可能想渲染部分：
我尝试了预渲染，但它确实关闭了模式，但是它在顶部添加了一个副本以及旧记录$（“#contacts”）。前缀（“”）`