Rails: AJAX not working with form Create Action

Question

This is a simple grocery list app. Left column div is a list of lists. Items for a particular list are displayed in the right column div.

Here's the process:

A user clicks on one of the lists, which then loads (AJAX) it's related items in the right div. This is working fine.

Here's where I'm stuck:

Above the items is an input field to submit a new item to the list of items below. I want AJAX to add the new item to the items below but when I press enter on the form field, nothing happens. When I refresh, the new item is added.

Here's what the server said:

Processing by ItemsController#create as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"YWIlMPXqoTvhqzGGPqm6Rn/E7jPRt8do/2tkjd0H1Qk=", "item"=>{"name"=>"Mayo"}, "list_id"=>"4"}
  List Load (0.1ms)  SELECT "lists".* FROM "lists" WHERE "lists"."id" = ? LIMIT 1  [["id", "4"]]
   (0.0ms)  begin transaction
  SQL (20.9ms)  INSERT INTO "items" ("completed", "created_at", "description", "list_id", "name", "position", "updated_at") VALUES (?, ?, ?, ?, ?, ?, ?)  [["completed", false], ["created_at", Mon, 29 Apr 2013 21:59:06 UTC +00:00], ["description", nil], ["list_id", 4], ["name", "Mayo"], ["position", nil], ["updated_at", Mon, 29 Apr 2013 21:59:06 UTC +00:00]]
   (1.6ms)  commit transaction
  Rendered items/_piece.html.erb (0.0ms)
  Rendered items/create.js.erb (0.7ms)

Here's the page loading process:

home.html.erb > _single.html.erb > create.js.erb > adds _piece.html.erb to home.html.erb

This is the Create Action from my items_controller.rb file:

    def create
        @list = List.find(params[:list_id])
        @item = @list.items.create!(params[:item])
        respond_to do |format|
          format.html
          format.js
      end
    end

This is my create.js file:

$('#item-container').prepend('<%= j render(partial: 'piece', locals: {item: @item}) %>');

This is my _piece.html.erb file:

<li><%= item.name %></l1>

This is my _single.html.erb file:

<div id="filter">
  <div id="filter-left">

  </div>
  <div id="filter-right">
    <%= link_to 'Delete', @list, :method => :delete %>
  </div>
</div>

<div id="quick-add">
  <%= form_for [@list, @item], :id => "form-quick", remote: true do |form| %>
      <%= form.text_field :name, :id => "input-quick", :autocomplete => "off" %>
    <% end %>
</div>

<ul class="item-container">
  <% @list.items.incomplete.each do |item| %>
    <% if item.id %>
      <li><%= link_to "", complete_item_path(@list.id,item.id), :class => "button-item button-item-incomplete" %> <%= item.name %></li>
    <% end %>
  <% end %>
</ul>

<div class="title">Completed items</div>

<ul class="item-container">
  <% @list.items.completed.each do |item| %>
    <% if item.id %>
      <li><div class="button-item button-item-completed"></div><%= item.name %></li>
    <% end %>
  <% end %>
</ul>

This is my home.html.erb file:

<div id="main-left">
    <div id="main-left-1">
        <%= link_to 'Add List', new_list_path, class: "button", id: "new_link", remote: true %>
    </div>
    <ul id="lists" data-update-url="<%= sort_lists_url %>">
      <% @lists.each do |list| %>
        <%= content_tag_for :li, list do %>
          <%= link_to list.name, list, :remote => true, :class => "link" %>
        <% end %>
      <% end %>
    </ul>
</div>
<div id="main-right">

</div>

Answer 1

Well, I had "item-container" as an ID instead of a class in the JS.ERB file. SILLY ERRORS!