Обновление <tr>в Rails через Ajax / jQuery

Question

Я пытаюсь обновить свой элемент списка после нажатия кнопки «Обновить» на моем модале.

Что я сделал до сих пор, так это то, что я поместил id с contact.id на <tr> для справки, а затем использовал его на своем jQuery / Ajax.

Вот мой _listing.html.erb:

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

Вот мой _contact_item.html.erb:

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

А вот мой update.js.erb:

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

В основном я я пытаюсь закрыть модальное окно после обновления, но в этом случае оно совсем не закрывается, и мне нужно обновить страницу sh, чтобы увидеть обновление, которое я не пытаюсь сделать, поскольку я использую ajax и jquery не делать никаких ссылок sh.

Кто-нибудь может увидеть, что мне здесь не хватает?

Answer 1

1. Ваш update.js.erb отсутствует @ перед contact. Должно быть так:

$("tr#contact_item_<%= @contact.id %>").html("<%=j render 'contacts/contact_item', contact: @contact %>");

Вам необходимо обновить _listing.html.erb следующим образом:

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

Затем удалите <tr id="contact_item_<%= contact.id %>"> строку и последнюю </tr> строку из _contact_item.html.erb.

Вот и все.

Answer 2

Вам не нужно фиксировать идентификатор - вы можете просто получить его из отрендеренного шаблона. Вы также не хотите вставлять весь визуализированный вид, поскольку это даст вам:

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

Вместо этого сохраните HTML как jQuery объект и извлеките идентификатор и внутренний HTML элемента tr:

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