ruby on rails 4 中利用 remote：true 实现 ajax ，小记

_form.html.erb

<%= form_for @post, :remote => true do |f| %>
  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :content %><br />
    <%= f.number_field :content %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

postcontroller.rb

  def new
    @post = Post.new
    respond_to do |format|
      format.html
      format.json { render json:@product }
      format.js
    end
  end

index.html.erb

<h1>Listing products</h1>

<table>
  <tr>
    <th>Name</th>
    <th>Price</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tbody id="products">
<% @products.each do |product| %>
<%= render "product", :product => product %>
<% end %>
</tbody>
</table>

<br />

<%= link_to 'New Product', new_product_path, :remote => true, :id => "new_product_link" %>

new.js.erb

$('#new_post_link').hide().after('<%= j render("form") %>');

------------------------------------------------------------------------------------------------------

  def create
    @product = Product.new(params[:product])

    respond_to do |format|
      if @product.save
        format.html { redirect_to @product, notice: 'Product was successfully created.' }
        format.json { render json: @product, status: :created, location: @product }
        format.js
      else
        format.html { render action: "new" }
        format.json { render json: @product.errors, status: :unprocessable_entity }
        format.js
      end
    end
  end

create.js.erb

<% if @product.errors.count == 0 %>

	$('#new_product').remove();
	$('#new_product_link').show();
	$('#products').append('<%= j render("product", :product => @product) %>');

<% else %>

	$('.new_product').remove();
	$('#new_product_link').after('<%= j render("form") %>');

<% end %>

_product.html.erb

<tr id="product_<%= product.id %>">
  <td><%= product.name %></td>
  <td><%= product.price %></td>
  <td><%= link_to 'Show', product %></td>
  <td><%= link_to 'Edit', edit_product_path(product), :remote => true %></td>
  <td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' }, :remote => true %></td>
</tr>

------------------------------------------------------------------------------------------------------

链接这里讲的详细

打开demo

打开源代码