Question

我正在尝试修改Rails待办事项列表应用中的表单以使用AJAX而不是HTML。我已经在后端提交了表单，但在前端，页面什么也没做。提交后，我想通过AJAX显示列表。

这是我的表单 - app/views/lists/_form.html.erb：

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

      <ul>
      <% @list.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>

  <%= f.fields_for :tasks do |task| %>
    <li>
      <%= task.label :name %>       <%= task.text_field :name %>
      <%= task.label :due %>        <%= task.datetime_select :due, ampm: true %>
      <%= task.label :completed %>  <%= task.check_box :completed %>
    </li>
  <% end %>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

以下是用于呈现表单的页面的CoffeeScript - app/assets/javascripts/lists.coffee：

$(document).ready ->
  $("new_list").on("ajax:success", (e, data, status, xhr) ->
    $("new_list").append xhr.responseText
  ).on "ajax:error", (e, xhr, status, error) ->
    $("new_list").append "<p>Error!</p>"

在后端提交表单成功...

Started POST "/lists" for ::1 at 2016-06-12 14:28:43 -0400
Processing by ListsController#create as JS
  Parameters: {"utf8"=>"✓", "list"=>{"name"=>"Groceries", "tasks_attributes"=>{"0"=>{"name"=>"Apples", "due(1i)"=>"2016", "due(2i)"=>"6", "due(3i)"=>"12", "due(4i)"=>"18", "due(5i)"=>"28", "completed"=>"0"}, "1"=>{"name"=>"Bananas", "due(1i)"=>"2016", "due(2i)"=>"6", "due(3i)"=>"12", "due(4i)"=>"18", "due(5i)"=>"28", "completed"=>"0"}, "2"=>{"name"=>"Oranges", "due(1i)"=>"2016", "due(2i)"=>"6", "due(3i)"=>"12", "due(4i)"=>"18", "due(5i)"=>"28", "completed"=>"0"}}}, "commit"=>"Create List"}
  User Load (4.7ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
   (0.3ms)  BEGIN
  SQL (0.8ms)  INSERT INTO "lists" ("name", "user_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "id"  [["name", "Groceries"], ["user_id", 1], ["created_at", "2016-06-12 18:28:43.050750"], ["updated_at", "2016-06-12 18:28:43.050750"]]
  SQL (0.7ms)  INSERT INTO "tasks" ("name", "completed", "due", "list_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5, $6) RETURNING "id"  [["name", "Apples"], ["completed", "f"], ["due", "2016-06-12 18:28:00.000000"], ["list_id", 22], ["created_at", "2016-06-12 18:28:43.055160"], ["updated_at", "2016-06-12 18:28:43.055160"]]
  SQL (0.7ms)  INSERT INTO "tasks" ("name", "completed", "due", "list_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5, $6) RETURNING "id"  [["name", "Bananas"], ["completed", "f"], ["due", "2016-06-12 18:28:00.000000"], ["list_id", 22], ["created_at", "2016-06-12 18:28:43.058809"], ["updated_at", "2016-06-12 18:28:43.058809"]]
  SQL (0.4ms)  INSERT INTO "tasks" ("name", "completed", "due", "list_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5, $6) RETURNING "id"  [["name", "Oranges"], ["completed", "f"], ["due", "2016-06-12 18:28:00.000000"], ["list_id", 22], ["created_at", "2016-06-12 18:28:43.061804"], ["updated_at", "2016-06-12 18:28:43.061804"]]
   (4.4ms)  COMMIT
Redirected to http://localhost:3000/lists/22
Completed 302 Found in 42ms (ActiveRecord: 12.1ms)

Started GET "/lists/22" for ::1 at 2016-06-12 14:28:43 -0400
Processing by ListsController#show as JS
  Parameters: {"id"=>"22"}
  List Load (0.6ms)  SELECT  "lists".* FROM "lists" WHERE "lists"."id" = $1 LIMIT 1  [["id", 22]]
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
  Task Load (0.9ms)  SELECT "tasks".* FROM "tasks" WHERE "tasks"."list_id" = $1  [["list_id", 22]]
  Rendered lists/show.html.erb within layouts/application (4.9ms)
  Rendered application/_nav.html.erb (0.5ms)
Completed 200 OK in 418ms (Views: 411.3ms | ActiveRecord: 1.8ms)

...但页面上没有任何反应。如何通过AJAX将新创建的列表加载到页面中？

为代码墙道歉，感谢您的帮助！

更新：我能够在页面上显示新创建的列表，但在下面显示现有页面内容。我更改了保存列表的format.json：

respond_to do |format|
  if @list.save
    format.html { redirect_to @list, notice: 'List was successfully created.' }
    format.json { render json: @list.to_json }
  else
    format.html { render :new }
    format.json { render json: @list.errors, status: :unprocessable_entity }
  end

Answer 1

$("new_list")正在寻找很可能不存在的标记<new_list>。

从代码中看不清楚它引用了什么，所以如果它是带有#的id前缀选择器，并且它是带.的类前缀

还不清楚表单提交的工作原理

Rails AJAX表单提交成功，但页面上没有任何反应

1 个答案: