Rails 4 ajax提交后不刷新

Question

我使用AJAX渲染我的项目部分，以便我可以直接在索引页面中创建一个新项目。

现在形式的作品。我可以创建一个项目并将其添加到数据库中，但为了查看索引页上的更改，我必须进行刷新。

我可以很容易地从索引页面销毁，这里是代码。我确实试图重做这个破坏而不是创造，但那是不成功的。

任何建议将是伟大的。我试图保持代码非常简单，像破坏函数。

destroy.js.erb

$('.delete_item').bind('ajax:success', function() { 
     $(this).closest('tr').fadeOut(); 
}); 

这是我的index.html。这只是基本的导轨造型。

<h1>Listing items</h1> 

<table> 
    <thead> 
    <tr> 
     <th>Content</th> 
     <th>Done</th> 
     <th colspan="3"></th> 
    </tr> 
    </thead> 

    <tbody> 
    <% @items.each do |item| %> 
     <tr> 
     <td><%= item.content %></td> 
     <td><%= item.done %></td> 
     <td><%= link_to 'Show', item %></td> 
     <td><%= link_to 'Edit', edit_item_path(item) %></td> 
     <td><%= link_to 'Destroy', item, method: :delete, data: { confirm: 'Are you sure?' }, remote: true, class: 'delete_item' %> </td> 
     </tr> 
    <% end %> 
    </tbody> 
</table> 

<br> 

<div class='new-item'> 
    <%= render 'form' %> 
</div> 

create.js.erb

$('.new-item').html("<%= escape_javascript(render partial: 'items/form', locals: {item: @item}) %>"); 

物品控制器：

class ItemsController < ApplicationController 
    before_action :set_item, only: [:show, :edit, :update, :destroy] 
    respond_to :html, :js 

    # GET /items 
    # GET /items.json 
    def index 
    @items = Item.all 
    @item = Item.new #will rename later to @new_item 
    respond_to do |format| 
     format.html 
     format.json 
     format.js 
    end 
    end 

    # GET /items/1 
    # GET /items/1.json 
    def show 
    end 

    # GET /items/new 
    def new 
    @item = Item.new 
    end 

    # GET /items/1/edit 
    def edit 
    end 

    # POST /items 
    # POST /items.json 
    def create 
    @item = Item.new(item_params) 

    respond_to do |format| 
     if @item.save 
     format.html { redirect_to @item, notice: 'Item was successfully created.' } 
     format.json { render :show, status: :created, location: @item } 
     else 
     format.html { render :new } 
     format.json { render json: @item.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

    # PATCH/PUT /items/1 
    # PATCH/PUT /items/1.json 
    def update 
    respond_to do |format| 
     if @item.update(item_params) 
     format.html { redirect_to @item, notice: 'Item was successfully updated.' } 
     format.json { render :show, status: :ok, location: @item } 
     else 
     format.html { render :edit } 
     format.json { render json: @item.errors, status: :unprocessable_entity } 
     end 
    end 
    end 

    # DELETE /items/1 
    # DELETE /items/1.json 
    def destroy 
    @item = Item.find(params[:id]) 
    @item.destroy 

    respond_to do |format| 
     format.html { redirect_to items_path } 
     format.json { head :no_content } 
     format.js { render layout: false } 
    end 
    end 

    private 
    # Use callbacks to share common setup or constraints between actions. 
    def set_item 
     @item = Item.find(params[:id]) 
    end 

    # Never trust parameters from the scary internet, only allow the white list through. 
    def item_params 
     params.require(:item).permit(:content, :done) 
    end 
end 

控制台日志：

Started POST "/items" for 127.0.0.1 at 2014-10-04 15:35:55 -0500 
Processing by ItemsController#create as JS 
    Parameters: {"utf8"=>"✓", "item"=>{"content"=>"Eggs", "done"=>"0"}, "commit"=>"Create Item"} 
    (0.1ms) begin transaction 
    SQL (0.4ms) INSERT INTO "items" ("content", "created_at", "done", "updated_at") VALUES (?, ?, ?, ?) [["content", "Eggs"], ["created_at", "2014-10-04 20:35:55.965462"], ["done", "f"], ["updated_at", "2014-10-04 20:35:55.965462"]] 
    (185.1ms) commit transaction 
Redirected to http://localhost:3000/items/17 
Completed 302 Found in 196ms (ActiveRecord: 186.3ms) 


Started GET "/items/17" for 127.0.0.1 at 2014-10-04 15:35:56 -0500 
Processing by ItemsController#show as JS 
    Parameters: {"id"=>"17"} 
    Item Load (0.3ms) SELECT "items".* FROM "items" WHERE "items"."id" = ? LIMIT 1 [["id", 17]] 
    Rendered items/show.html.erb within layouts/application (0.7ms) 
Completed 200 OK in 61ms (Views: 59.4ms | ActiveRecord: 0.3ms) 

编辑1：基于关建议。该项目仍然只显示刷新后。

def create 
    @item = Item.new(item_params) 
    if @item.save 
     flash[:notice] = "Item was saved" 
    else 
     flash[:error] = "There was an error. Please try again." 
    end 
    respond_with(@item) do |format| 
     format.html {redirect_to @item} 
    end 
    end 

编辑2：仍然没有工作，但有些更改 create.js.erb

$('.list-items').prepend("<%= escape_javascript(render(@item)) %>"); 
    $('.new-item').html("<%= escape_javascript(render partial: 'form', locals: { item: @item }) %>)"); 

index.html.erb

<div class='list-items'> 
    <%= render 'items', collection: @items%> 
</div> 


<div class='new-item'> 
    <%= render 'form'%> 
</div> 

Answer 1

试试这个：

删除在您的create.js.erb然后添加一个ID到您的表，如<table id="myTable">

在你的控制器

def create 
    @item = Item.new(item_params) 
    if @item.save 
     flash[:notice] = "Item was saved" 
    else 
     flash[:error] = "There was an error. Please try again." 
    end 
    respond_to do |format| 
     format.html {redirect_to @item} 
     format.js {render :inline => "<tr><td><%= @item.content %></td><td><%= @item.done %></td><td><%= link_to 'Show', @item %></td><td><%= link_to 'Edit', edit_item_path(item) %></td><td><%= link_to 'Destroy', @item, method: :delete, data: { confirm: 'Are you sure?' }, remote: true, class: 'delete_item' %></td></tr>"} 
    end 
end 

在你的资产的application.js（或controller_name.js）/ JavaScript的文件夹

$(".list-items").on("ajax:success", function(evt, data, status, xhr) { 
    $('#myTable tbody).append(xhr.responseText);  
}); 

不要忘记:remote => true表单的form_for标签内