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_&lt;%= @availability.id %&gt;").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/&lt;%= @availability.id %&gt;', function (data){
    // Append new data to table or refresh partial somehow
  }).done(function() {
      // update the individual row and fade back in?
      $("#availability_&lt;%= @availability.id %&gt;").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');

以更多rails方式执行此操作的第二个选项。您只需创建与remote: true的链接，并在您的js视图中编写您的放置逻辑（与第一个解决方案回调函数几乎相同）

刷新或更新部分

1 个答案: