Rails AJAX Formular Übermittlung erfolgreich ist, aber nichts passiert auf Seite

Question

Ich versuche ein Formular in einer Rails To-do-Liste App zu ändern, um AJAX anstelle von HTML zu verwenden. Ich habe das Formular am Backend eingereicht, aber am Frontend tut die Seite nichts. Nach der Einreichung möchte ich die Liste über AJAX anzeigen.

Hier ist meine 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 %> 

Und hier ist das Coffeescript für die Seite, auf die das Formular gerendert wird - 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>" 

das Formular erfolgreich auf der Rückseite Einreichen Ende ...

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) 

... aber nichts geschieht Stifte auf der Seite. Wie kann ich die neu erstellte Liste über AJAX in die Seite laden?

Entschuldigung für die Wand des Codes, und danke für Ihre Hilfe!

UPDATE: Ich konnte die neu erstellte Liste erhalten auf der Seite zu machen, aber es scheint unter die vorhandenen Seiteninhalte. Ich habe die format.json für gespeicherte Listen:

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") ist für einen Tag suchen <new_list> die höchstwahrscheinlich nicht existiert.

Nicht von Code klar gezeigt, was es verweist also, wenn es mit # ein ID-Präfix Selektor ist und wenn es ein Klassenpräfix mit .

auch nicht klar, wie Schalungen für die `show