Masatoshi Nishiguchi
Software Engineer

Updating a list with Ajax in Rails

rails ajax

View

...
<tbody>
  <% @household_items.each do |household_item| %>
  <tr id="household_item-<%= household_item.id %>">
    <td><%= household_item.name %></td>
    <td><%= household_item.volume %></td>
    <td><%= household_item.quantity %></td>
    <td><%= household_item.tag %></td>
    <td><%= household_item.description %></td>
    <td><%= link_to 'Show', household_item %></td>
    <td><%= link_to 'Edit', edit_household_item_path(household_item) %></td>
    <td>
      <%= link_to 'Destroy', household_item, method: :delete, remote: true,
      data: { confirm: 'Are you sure?' } %>
    </td>
  </tr>
  <% end %>
</tbody>
...

Create

app/controllers/household_items_controller.rb

  ...
  # POST /household_items
  # POST /household_items.json
  def create
    @household_item = HouseholdItem.new(household_item_params)

    respond_to do |format|
      if @household_item.save
        format.html { ... }
        format.js do
          # For ajax, use `flash.now`.
          flash.now[:success] = "HouseholdItem was successfully created."
          @household_item
        end
      else
        format.html { ... }
      end
    end
  end
  ...

app/views/household_items/create.js.erb

// Update the table.
var $tbody = $('#household_items__table tbody');
var newRecordHTML =
  "<%= j render 'household_items/table_row', household_item: @household_item %>";
$tbody.prepend(newRecordHTML);

// Update flash.
$('#flash_box').html("<%= j render 'layouts/flash' %>");

Delete

app/controllers/household_items_controller.rb

  ...
  # DELETE /household_items/1
  # DELETE /household_items/1.json
  def destroy
    @household_item = HouseholdItem.find(params[:id])
    @household_item.destroy
    respond_to do |format|
      format.js do
        # For ajax, use `flash.now`.
        flash.now[:success] = "HouseholdItem was successfully destroyed."
      end
    end
  end
  ...

app/views/household_items/destroy.js.erb

// Remove the deleted item from the table.
$('#household_item-<%= @household_item.id %>').remove();

// Update flash.
$('#flash_box').html("<%= j render 'layouts/flash' %>");

Gotchas

Don’t forget to update your .js.erb files when refactoring

We cannot comment out erb code with JavaScript commenting


References