通过AJAX更新的表缺少行

Question

我完成了this tutorial，向我展示了如何进行AJAX操作，该操作将更新表的视图而无需刷新页面。

在我的申请中，我有与进度相关的学生和课程。

我已经有了一张表格，适用于学生和课程的所有CRUD方法，但是我在进度方面遇到了麻烦。

基本上，我有一个看起来像这样的表：

使用此HTML：

<tbody class="progress-index">
  <tr>
    <td>Student 1</td>
        <td>
          <div class="btn-group">
              <a class="btn btn-primary btn-progress progress-incomplete" data-remote="true" href="/progresses/29/edit">Started</a>
              ...
          </div>
        </td>
        <td>
            <a class="btn btn-default btn-progress btn-progress-inactive" data-remote="true" href="/progresses/new?progress%5Blesson_id%5D=3&amp;progress%5Bstudent_id%5D=1">Start</a>
        </td>
  </tr>
  <tr>
    <td>Student 2</td>
        <td>
            <a class="btn btn-default btn-progress btn-progress-inactive" data-remote="true" href="/progresses/new?progress%5Blesson_id%5D=1&amp;progress%5Bstudent_id%5D=2">Start</a>
        </td>
        <td>
          <div class="btn-group">
              <a class="btn btn-primary btn-progress progress-incomplete" data-remote="true" href="/progresses/30/edit">Started</a>
              ...
          </div>
        </td>
  </tr>
</tbody>

在单击开始以获取空白进度后，我将进入一个表单以创建该进度，并为该进度输入一些字段（表明学生在课程中所处的位置），然后我可以提交进度。

问题是，在我提交它之后，该表看起来真的很乱，并且其中不再有任何行。

使用此HTML：

<tbody class="progress-index">

    Student 1

    <div class="btn-group">
        <a class="btn btn-primary btn-progress progress-incomplete" data-remote="true" href="/progresses/29/edit">Started</a>
        ...
    </div>

    <div class="btn-group">
        <a class="btn btn-primary btn-progress progress-incomplete" data-remote="true" href="/progresses/31/edit">Started</a>
        ...
    </div>

    Student 2

    <a class="btn btn-default btn-progress btn-progress-inactive" data-remote="true" href="/progresses/new?progress%5Blesson_id%5D=1&amp;progress%5Bstudent_id%5D=2">Start</a>

    <div class="btn-group">
        <a class="btn btn-primary btn-progress progress-incomplete" data-remote="true" href="/progresses/30/edit">Started</a>
        ...
    </div>
</tbody>

呈现表的代码：

前进/ index.html.erb

...
<div class="new-progress"></div>

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Student</th>
      <% @lessons.each do |l| %>
        <th><%= l.title %></th>
      <% end %>
    </tr>
  </thead>
  <tbody class="progress-index">
    <%= render "index" %>
  </tbody>
</table>
...

前进/ _index.html.erb

...
<% @students.each do |s| %>
  <tr>
    <td><%= s.name %></td>
    <% @lessons.each do |l| %>
        <td>
            <% if !Progress.exists?(:student_id => s.id, :lesson_id => l.id) %>
                ...
            <% else %>
                ...
            <% end %>
        </td>
    <% end %>

progresses_controller.rb

def index
  @students = Student.all.sort_by &:name
  @lessons = Lesson.all.sort_by &:difficulty
end

提交新进度后的控制台输出：

Started POST "/progresses" for ::1 at 2015-02-21 15:54:29 -0800
Processing by ProgressesController#create as JS
  Parameters: {"utf8"=>"✓", "progress"=>{"lesson_id"=>"3", "student_id"=>"1", "coached"=>"0", "completed"=>"0", "scratch_project_id"=>""}, "commit"=>"Create Progress"}
   (0.1ms)  begin transaction
  Progress Exists (0.2ms)  SELECT  1 AS one FROM "progresses" WHERE ("progresses"."lesson_id" = 3 AND "progresses"."student_id" = 1) LIMIT 1
  SQL (0.5ms)  INSERT INTO "progresses" ("completed", "coached", "scratch_project_id", "lesson_id", "student_id", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?, ?, ?)  [["completed", "f"], ["coached", "f"], ["scratch_project_id", ""], ["lesson_id", 3], ["student_id", 1], ["created_at", "2015-02-21 23:54:29.482937"], ["updated_at", "2015-02-21 23:54:29.482937"]]
   (6.9ms)  commit transaction
  Student Load (0.2ms)  SELECT "students".* FROM "students"
  Lesson Load (0.2ms)  SELECT "lessons".* FROM "lessons"
  Progress Exists (0.2ms)  SELECT  1 AS one FROM "progresses" WHERE "progresses"."student_id" = ? AND "progresses"."lesson_id" = ? LIMIT 1  [["student_id", 1], ["lesson_id", 1]]
  Progress Load (0.1ms)  SELECT  "progresses".* FROM "progresses" WHERE "progresses"."student_id" = ? AND "progresses"."lesson_id" = ? LIMIT 1  [["student_id", 1], ["lesson_id", 1]]
  Progress Exists (0.1ms)  SELECT  1 AS one FROM "progresses" WHERE "progresses"."student_id" = ? AND "progresses"."lesson_id" = ? LIMIT 1  [["student_id", 1], ["lesson_id", 3]]
  Progress Load (0.1ms)  SELECT  "progresses".* FROM "progresses" WHERE "progresses"."student_id" = ? AND "progresses"."lesson_id" = ? LIMIT 1  [["student_id", 1], ["lesson_id", 3]]
  Progress Exists (0.1ms)  SELECT  1 AS one FROM "progresses" WHERE "progresses"."student_id" = ? AND "progresses"."lesson_id" = ? LIMIT 1  [["student_id", 2], ["lesson_id", 1]]
  Progress Load (0.1ms)  SELECT  "progresses".* FROM "progresses" WHERE "progresses"."student_id" = ? AND "progresses"."lesson_id" = ? LIMIT 1  [["student_id", 2], ["lesson_id", 1]]
  Progress Exists (0.1ms)  SELECT  1 AS one FROM "progresses" WHERE "progresses"."student_id" = ? AND "progresses"."lesson_id" = ? LIMIT 1  [["student_id", 2], ["lesson_id", 3]]
  Progress Load (0.1ms)  SELECT  "progresses".* FROM "progresses" WHERE "progresses"."student_id" = ? AND "progresses"."lesson_id" = ? LIMIT 1  [["student_id", 2], ["lesson_id", 3]]
  Rendered progresses/_index.html.erb (8.2ms)
  Rendered progresses/_save.js.erb (16.9ms)
  Rendered progresses/create.js.erb (23.6ms)
Completed 200 OK in 50ms (Views: 31.7ms | ActiveRecord: 8.8ms)

Answer 1

糟糕！问题是我在_index.html.erb部分的顶部标记中写了一些CSS，然后将其移到index.html.erb中，所有内容都已修复。