2016-03-12 19 views
1

我試圖在我的應用程序中實現一點Ajax似乎工作正常,但它沒有更新執行操作後的頁面。ajax調用沒有更新軌道上的內容

我添加了Ajax到我的銷燬方法

def destroy 
    @item = Item.find(params[:id]) 
    @item.user = current_user 
    if @item.destroy 
     flash[:notice] = "Item Completed" 
    else 
     flash[:alert] = "Item was unable to be marked completed " 
    end 

    respond_to do |format| 
     format.html 
     format.js 
    end 
    end 

我有更新我的_item.html.erb和_form.html.erb諧音與remote: true

<%= content_tag :div, class: 'media', id: "item-#{item.id}" do %> 
<div class="media"> 
    <div class="media-body"> 
    <small> 
     <%= item.name.titleize %> 
     | submitted <%= time_ago_in_words(item.created_at) %> 
     <% if current_user == @user %> 
     <%= link_to "Completed ", [@user, item], method: :delete,remote: true, class: 'glyphicon glyphicon-ok' %><br> 
     <% end %> 
    </small> 
    </div> 
</div> 
<% end %> 

_from.html.erb

<%= form_for [@user, item ], remote: true do |f|%> 
    <div class="form-group"> 
    <%= f.label :name, class: 'sr-only' %> 
    <%= f.text_field :name , class: 'form-control', placeholder: "Enter a new item " %> 
    </div> 
    <%= f.submit "Submit Item", class: 'btn btn-primary pull-right' %> 
<% end %> 


User#show view <div class='new_item'> 
<%= render :partial => 'items/form', :locals =>{:item => Item.new} %> 
</div> 
<% end %> 
<div class='js-items'> 
<% @user.items.order('created_at DESC').each do |item| %> 
<%= render :partial => 'items/item' , :locals => {:item => item } %> 
</div> 

destroy.js.erb

$('#item-<%= @item.id %>').hide(); 

就像我之前說過的,當我點擊刪除按鈕時,該項目被刪除,但我需要刷新頁面才能看到更新的頁面。任何想法我可能做錯了,任何推到正確的方向將不勝感激!

+0

你需要刷新頁面?或者您需要通過ajax重新加載頁面內容? – Sravan

回答

0

嘗試渲染Java腳本的方法本身和檢查,

def destroy 
    @item = Item.find(params[:id]) 
    @item.user = current_user 
    if @item.destroy 
     flash[:notice] = "Item Completed" 
    else 
     flash[:alert] = "Item was unable to be marked completed " 
    end 

    respond_to do |format| 
     format.html 
     format.js { render    
      $('#item-<%= @item.id %>').hide(); 
     } 
    end 
    end