title: Rails AJAX form submission succeeds, but nothing happens on page
body: <p>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.</p>
  
  <p>Here is my form – <code>app/views/lists/_form.html.erb</code>:</p>
  
  <pre><code>&lt;%= form_for(@list, remote: true) do |f| %&gt;
    &lt;% if @list.errors.any? %&gt;
      &lt;div id="error_explanation"&gt;
        &lt;h2&gt;&lt;%= pluralize(@list.errors.count, "error") %&gt; prohibited this list from being saved:&lt;/h2&gt;
  
        &lt;ul&gt;
        &lt;% @list.errors.full_messages.each do |message| %&gt;
          &lt;li&gt;&lt;%= message %&gt;&lt;/li&gt;
        &lt;% end %&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;% end %&gt;
  
    &lt;div class="field"&gt;
      &lt;%= f.label :name %&gt;&lt;br&gt;
      &lt;%= f.text_field :name %&gt;
    &lt;/div&gt;
  
    &lt;%= f.fields_for :tasks do |task| %&gt;
      &lt;li&gt;
        &lt;%= task.label :name %&gt;       &lt;%= task.text_field :name %&gt;
        &lt;%= task.label :due %&gt;        &lt;%= task.datetime_select :due, ampm: true %&gt;
        &lt;%= task.label :completed %&gt;  &lt;%= task.check_box :completed %&gt;
      &lt;/li&gt;
    &lt;% end %&gt;
  
    &lt;div class="actions"&gt;
      &lt;%= f.submit %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>And here is the CoffeeScript for the page on which the form is being rendered – <code>app/assets/javascripts/lists.coffee</code>:</p>
  
  <pre><code>$(document).ready -&gt;
    $("new_list").on("ajax:success", (e, data, status, xhr) -&gt;
      $("new_list").append xhr.responseText
    ).on "ajax:error", (e, xhr, status, error) -&gt;
      $("new_list").append "&lt;p&gt;Error!&lt;/p&gt;"
  </code></pre>
  
  <p>Submitting the form succeeds on the back end…</p>
  
  <pre><code>Started POST "/lists" for ::1 at 2016-06-12 14:28:43 -0400
  Processing by ListsController#create as JS
    Parameters: {"utf8"=&gt;"✓", "list"=&gt;{"name"=&gt;"Groceries", "tasks_attributes"=&gt;{"0"=&gt;{"name"=&gt;"Apples", "due(1i)"=&gt;"2016", "due(2i)"=&gt;"6", "due(3i)"=&gt;"12", "due(4i)"=&gt;"18", "due(5i)"=&gt;"28", "completed"=&gt;"0"}, "1"=&gt;{"name"=&gt;"Bananas", "due(1i)"=&gt;"2016", "due(2i)"=&gt;"6", "due(3i)"=&gt;"12", "due(4i)"=&gt;"18", "due(5i)"=&gt;"28", "completed"=&gt;"0"}, "2"=&gt;{"name"=&gt;"Oranges", "due(1i)"=&gt;"2016", "due(2i)"=&gt;"6", "due(3i)"=&gt;"12", "due(4i)"=&gt;"18", "due(5i)"=&gt;"28", "completed"=&gt;"0"}}}, "commit"=&gt;"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"=&gt;"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)
  </code></pre>
  
  <p>…but nothing happens on the page. How can I load the newly created list into the page via AJAX?</p>
  
  <p>Apologies for the wall of code, and thanks for your help!</p>
  
  <p><strong>UPDATE:</strong> I was able to get the newly created list to render on the page, but it appears <em>below</em> the existing page contents. I changed the <code>format.json</code> for saved lists:</p>
  
  <pre><code>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
  </code></pre>