Question

我完成了this tutorial，它向我展示了如何在不需要页面刷新的情况下更新表格视图的AJAX操作。

在我的申请中，我有学生和课程，这些都与进步有关。

我有一张桌子，为学生和课程使用所有CRUD方法，但我在进展方面遇到了麻烦。

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

http://i61.tinypic.com/10pplpx.png

使用此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>

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

问题是，在我提交之后，表格看起来真的搞砸了，并且不再有任何行。

http://i57.tinypic.com/fohe92.png

使用此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 %>

progress_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时，一切都修好了。

通过AJAX更新的表缺少行

1 个答案: