Обновление или обновление партитуры

Question

Итак, у меня есть две модели. Услуги и доступность. У каждого объекта есть много возможностей. На странице моих объектов у меня есть частичная информация о всех доступных для текущего объекта.

Я пытаюсь разрешить операции CRUD с доступностью. Удалить работает нормально, я делаю это через ajax и использую jquery для удаления строки в таблице.

У меня возникли проблемы с созданием и обновлением. Я могу сделать их удаленно, но отражая изменение без перезагрузки страницы, было сильно.

Это то, что парциальное выглядит like:

<tbody class="availabilityContainer"> 
    <% facility_availabilities?.each do |a|%> 
    <tr id="availability_<%= a.id %>"> 
     <td id="date_<%= a.id %>"><%= a.start_time.strftime("%a, %b %d %Y") %></td> 
     <td id="time_<%= a.id %>"><%= a.start_time.strftime("%I:%M %p") %> - <%= a.end_time.strftime("%I:%M %p") %></td> 
     <td id="price_<%= a.id %>"><%= number_to_currency a.price %></td> 
     <td id="discount_<%= a.id %>"><%= number_to_percentage a.discount, precision: 0 %></td> 
     <td> 
      <!-- Purchase button --> 
      <%= link_to("<i class='fa fa-shopping-cart'></i>".html_safe, "#", class:"btn btn-xs btn-success") %> 

      <!-- Edit button --> 
      <!-- <button type="button" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#editAvailability"><i class='fa fa-pencil'></i></button> --> 
      <%= link_to("<i class='fa fa-pencil'></i>".html_safe, edit_availability_path(a.id) , class:"btn btn-xs btn-primary", data:{toggle:"modal", target:"#editAvailability"}, remote: true) %> 

      <!-- Delete button --> 
      <%= link_to("<i class='fa fa-times'></i>".html_safe, availability_path(a.id), method: :delete, class:"btn btn-xs btn-danger", remote: true) %> 
     </td> 
    </tr> 
    <!-- Load Edit Availability Form --> 
    <div class="modal fade" id="editAvailability" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div> 
    <% end %> 
</tbody> 

Я пробовал некоторые вещи в JS:

// Hide modal on update 
$("#editAvailability").modal("hide"); 

// Update view 
$("#availability_<%= @availability.id %>").fadeOut(500,function(){ 
    currentItem = $(this) 
    // Get the new object from the database (should just get it from the form but i'm committed now) 
    $.get('/availabilities/<%= @availability.id %>', function (data){ 
    // Append new data to table or refresh partial somehow 
    }).done(function() { 
     // update the individual row and fade back in? 
     $("#availability_<%= @availability.id %>").fadeIn(500) 
    }) 
}); 

Answer 1

Я думаю, что вы смешано два различных подхода и запутанным из-за него. Первый подход просто добавляет строку в таблицу после чистого js-запроса.

$.get("ajax_address", function(data){ 
    $("<tr><td>you new row</td></tr>").appendTo("#table_id"); 
} 

Вы также можете цепной эффект анимации для вас appendTo, как

$("some").appendTo("#table").hide().fadeIn('slow'); 

Второй вариант, чтобы сделать его более рельсов пути. Вы просто создаете ссылку с remote: true и пишете логику размещения в своем представлении js (почти так же, как функция обратного вызова первого решения)