Question posted in
You can find the official documentation here.

Updating a <tr> in Rails via Ajax/jQuery – Jquery ajax

I am trying to update my list item after clicking update on my modal.

What I did so far is that I placed an id with the contact.id on my <tr> for reference and then use that on my jQuery / Ajax.

Here’s my _listing.html.erb:

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

Here’s my _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>

And here’s my 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 %>

Basically, I am trying to close the modal after update but in this case it won’t close at all and I need to refresh the page in order to see the update which is not what I am trying to do since I am using ajax and jquery to do no refresh.

Anyone can see what am I missing here?

Tags:

2

Answers


  1. 0

    You don’t need to hardwire the id – you can just get it from the rendered template. You also don’t want to insert the entire rendered view as that would give you:

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

    Instead save the HTML as a jQuery object and pull out the id and the innerHTML of the tr element:

    <% 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 %>
    Login or Signup to reply.
  2. 0
    1. Your update.js.erb is missing @ infront of contact. It should be like this:

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

    1. You need to update _listing.html.erb like this:
    <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>
    1. Then remove <tr id="contact_item_<%= contact.id %>"> line and the last </tr> line from _contact_item.html.erb.

    That’s it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search