使用ajax、Rails、Coffeescript、jQuery更新列表中的记录

问题

我有一份博主名单。使用ajax，我单击edit来编辑特定的记录。我编辑该记录并单击“更新”。仍然使用ajax，我在所有记录的列表中添加了fadeIn——旧记录应该从记录列表中删除，取而代之的是更新后的记录及其新值

回答：使用ajax的博客作者列表中Crud操作的代码，包括更新：

bloggers\u controller.rb

视图/博客/new.js.coffee

$form=$（''）.hide（）
$（“#新链接”）。在（$form）之后
$（“#新链接”）。淡出（100，->
$form.fadeIn（100））

视图/博客/show.js.coffee

$index=$（“列出博客作者”）
$blogger=$（''）.hide（）
$index.after（$blogger）
$index.fadeOut 100，->
$blogger.fadeIn（100）

views/bloggers/update.js.coffee

$('#blogger-<%= @blogger.id %>').replaceWith('<%= j render(@blogger) %>')
$blogger = $('#blogger-<%= @blogger.id %>').css("color", "#4F8A10")

$bloggers = $('#listing_bloggers')
$edit_blogger = $("#edit_blogger")

$edit_blogger.fadeOut 100, ->
    $bloggers.fadeIn 100, ->
        $blogger.effect('highlight', {color: '#DFF2BF'}, 1000)
        $blogger.animate({"color": "black"}, 1000).dequeue()    


$edit_blogger.remove()

$（“#blogger-”）。替换为（“”）
$blogger=$（“#blogger-”）.css（“颜色”，“4F8A10”）
$bloggers=$（“#列出_bloggers”）
$edit_blogger=$（“#edit_blogger”）
$edit_blogger.fadeOut 100，->
$bloggers.fadeIn 100，->
$blogger.effect（'highlight'，{color:'#DFF2BF'}，1000）
$blogger.animate（{“color”：“black”}，1000.dequeue（）
$edit_blogger.remove（）

您的博客作者-部分应该是这样的（在erb中）：

然后在

update.js.erb

中编写

$('#blogger-<%= @blogger.id %>').replaceWith('<%= j render(@blogger) %>') 

$（“#blogger-”）。替换为（“”）

    <h1>Editing blogger</h1>

    <%= render 'form' %>


    <%= link_to 'Back', bloggers_path, remote: true%>

</div>

<%= form_for(@blogger, remote: true) do |f| %>
  <% if @blogger.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@blogger.errors.count, "error") %> prohibited this blogger from being saved:</h2>

      <ul>
      <% @blogger.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :age %><br>
    <%= f.number_field :age %>
  </div>
  <div class="field">
    <%= f.label :about %><br>
    <%= f.text_area :about %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<div id="show_blogger">
    <p id="notice"><%= notice %></p>

    <p>
      <strong>Name:</strong>
      <%= @blogger.name %>
    </p>

    <p>
      <strong>Age:</strong>
      <%= @blogger.age %>
    </p>

    <p>
      <strong>About:</strong>
      <%= @blogger.about %>
    </p>

    <%= link_to 'Edit', edit_blogger_path(@blogger), remote: true %> 
    <%= link_to 'Back', bloggers_path, remote: true%>

</div>

$newBlogger = $('<%= j render(@blogger) %>').css("color", "#4F8A10").hide()
$("#all_bloggers").append($newBlogger)
$('#new_blogger').fadeOut 100, ->
    $newBlogger.effect('highlight', {color: '#DFF2BF'}, 1000)
    $newBlogger.animate({"color": "black"}, 1000).dequeue()
    $('#new_link').fadeIn(100).dequeue()

$('#new_blogger').remove()

$('#blogger-<%= @blogger.id %>').fadeOut 200, ->
    this.remove()

$form = $('<%= j render("edit") %>').hide()
$bloggers = $('#listing_bloggers')
$bloggers.after($form)

if($bloggers.is(':hidden'))
    #list is already hidden
    $('#show_blogger').remove()
    $form.fadeIn 100

else
    #list needs to be hidden
    $bloggers.after($form)
    $bloggers.fadeOut 100, ->
        $form.fadeIn 100

<div id="listing_bloggers">
    <h1>Listing bloggers</h1>

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>About</th>
          <th colspan="3"></th>
        </tr>
      </thead>

      <tbody id="all_bloggers">
        <%= render @bloggers %>
      </tbody>
    </table>

    <br>

    <%= link_to 'New Blogger', new_blogger_path, id: "new_link", remote: true %>

</div>

$bloggers = $('#listing_bloggers')

if($bloggers.is(':hidden'))

    if($('#show_blogger').length == 0)
        $bloggers.fadeIn 100
        $("#edit_blogger").remove()
    else
        $('#show_blogger').fadeOut 100, ->
            $bloggers.fadeIn 100

        $('#show_blogger').remove()

$form = $('<%= j render("form") %>').hide()
$('#new_link').after($form)
$('#new_link').fadeOut(100, -> 
    $form.fadeIn(100))

$index = $("#listing_bloggers")
$blogger = $('<%= j render("show") %>').hide()
$index.after($blogger)
$index.fadeOut 100, ->
    $blogger.fadeIn(100)

$('#blogger-<%= @blogger.id %>').replaceWith('<%= j render(@blogger) %>')
$blogger = $('#blogger-<%= @blogger.id %>').css("color", "#4F8A10")

$bloggers = $('#listing_bloggers')
$edit_blogger = $("#edit_blogger")

$edit_blogger.fadeOut 100, ->
    $bloggers.fadeIn 100, ->
        $blogger.effect('highlight', {color: '#DFF2BF'}, 1000)
        $blogger.animate({"color": "black"}, 1000).dequeue()    


$edit_blogger.remove()

<div id="blogger-<%= @blogger.id %>" class="blogger">
  ...
</div>

.blogger{id: "blogger-#{@blogger.id}" }
  -# followed by the rest of your view

$('#blogger-<%= @blogger.id %>').replaceWith('<%= j render(@blogger) %>')