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

Question

I'm trying to modify a form in a Rails to-do list app to use AJAX instead of HTML. I've gotten the form to submit on the back end, but on the front end, the page does nothing. Upon submission, I would like to display the list via AJAX.

Here is my form – 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 %>

And here is the CoffeeScript for the page on which the form is being rendered – 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>"

Submitting the form succeeds on the back end…

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)

…but nothing happens on the page. How can I load the newly created list into the page via AJAX?

Apologies for the wall of code, and thanks for your help!

UPDATE: I was able to get the newly created list to render on the page, but it appears below the existing page contents. I changed the format.json for saved lists:

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") is looking for a tag <new_list> which most likely doesn't exist.

Not clear from code shown what it is referencing so if it's an id prefix selector with # and if it's a class prefix with .

Also not clear how form submit works