Rails 3 Ajax-JQuery：視圖在銷燬對象時未更新

Question

我在使用Rails 3.2.11在AJAX中銷燬對象時遇到問題。

我跟着這個教程： http://www.tutorialspoint.com/ruby-on-rails/rails-and-ajax.htm

控制器工作正常，但在視圖中，沒有什麼是正確完成。我認爲我的問題是JQuery，但我不確定，那麼我的問題在哪裏？

//views/tournaments/index.html.haml 
%table.table.table-hover.table-bordered 
%thead 
    %th Name 
    %th Place 
    %th Nb players max 
    %th 
    - if can? :update, @tournaments 
    %th 
    - if can? :destroy, @tournaments 
    %th 
- @tournaments.each do |tournament| 
    %tr 
    %td= tournament.name 
    %td= tournament.place 
    %td= tournament.nb_players_max 
    %td= link_to 'Show', tournament 
    - if can? :update, @tournaments 
    %td= link_to 'Edit', edit_tournament_path(tournament) 
    - if can? :destroy, @tournaments 
    %td= link_to 'Destroy', tournament, method: :delete, data: {confirm: 'Are you sure?'}, :class => 'delete', :remote => true 

我控制器tournaments_controller.rb：

def destroy 
    @tournament = Tournament.find(params[:id]) 
    @tournament.destroy 

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

destroy.js.erb：

console.log("hello"); 
$('.delete').bind('ajax:success', function(){ 
console.log("delete!"); 
$(this).parent('tr').fadeOut(400, function(){ 
    $(this).remove(); 
}); 
}); 

控制檯告訴我，該控制器正常工作（200 OK），Hello是顯示在控制檯，但沒有別的...

發生了什麼事？ :-(

編輯：

我做了一個測試，專門創建一個項目來測試本教程，它工作正常，但不是在我的項目上面:(

編輯@DickieBoy： 我試過，但沒有奏效：

$(document).ready(function(){ 
$('.delete').bind('ajax:success', function() { 
    console.log("delete!"); 
    $(this).closest('tr').fadeOut(400, function() { 
    $(this).remove(); 
    }); 
}); 
}); 

Answer 1

這裏是解決方案！

當你調用

:remote => true 

它在控制器和之後，destroy.js.erb動作。

該文檔已經準備就緒，並且使用JQuery，這非常簡單。要做到這一點，我們只需要做到：

$('#del-<%= @tournament.id %>').closest('tr').fadeOut(400, function() { 
$(this).remove(); 
}); 

@ tournament.id ???它來自這裏，在我看來：

%td= link_to 'Destroy', tournament, method: :delete, data: {confirm: 'Are you sure?'}, :id => "del-#{tournament.id}", :remote => true 

而且所有的作品！ ;-)

編輯：

您還可以通過比賽的標識加入JavaScript的，所以你將有每一場比賽是在索引頁上唯一的一段JavaScript代碼的問題。我一定錯過了什麼，在'刪除'被記錄。什麼事件觸發了當前的代碼？ - DickieBoy 21小時前

remote：true將元素動作轉換爲ajax調用。所以無論是ajax：成功運行還是通話不起作用。 - DickieBoy 19小時前

這不是拿比賽ID的問題。首先，我的觀點有這個元素：

%td= link_to 'Destroy', tournament, method: :delete, data: {confirm: 'Are you sure?'}, :id => "del-#{tournament.id}", :remote => true, :class => 'btn btn-danger btn-sm' 

當我點擊它，這個調用AJAX（你是對的！）。但在此之前，它確實我的控制器內的行動：

def destroy 
    # @tournament is finded in a before_filter (or before_action for those using Rails 4) 
    @tournament.destroy 

    respond_to do |format| 
    format.html { redirect_to tournaments_url } 
    format.json { head :no_content } 
    format.js 
    # thanks to this, I can call my destroy.js.erb 
    end 

由於破壞行動是成功的，它會調用destroy.js.erb：

$('#del-<%= @tournament.id %>').closest('tr').fadeOut(400, function() { 
$(this).remove(); 
}); 

最接近的作品，因爲這裏的規範的html表格，你應該使用父母，它更準確地描述發生了什麼。 - DickieBoy 20小時前

關於'最接近'，我認爲這是比'父母'更好的答案在我的情況。它似乎更快。看看這裏：http://www.sitepoint.com/jquerys-closest-parents/

我希望我理解你的問題，答對了:-)我虛心接受建議:-)

PS：或許我忘了告訴你，我使用jQuery UJS。這是我的application.js：

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require_tree . 

Answer 2

我懷疑的問題是，ajax:success事件的任何「刪除」上課前綁定到「刪除」類存在，因此：

$(document).ready(function(){ 
    $('.delete').bind('ajax:success', function(){ 
    console.log("delete!"); 
    $(this).parent('tr').fadeOut(400, function(){ 
    $(this).remove(); 
    }); 
}); 

應該修復它。

我建議further reading on jquery events

---

編輯：

的問題不在於事件的加載。這是撥打parent。

從jQuery文檔：

此方法類似於。家長（），除了.parent（）只行進的單一電平向上的DOM樹。

因此$(this).parent('tr')返回一個空數組，因爲父項不是tr。

使用此：

$('.delete').bind('ajax:success', function(){ 
    console.log("delete!"); 
    $(this).parents('tr').fadeOut(400, function(){ // this line has changed 
    $(this).remove(); 
    }); 
}); 

Answer 3

我只是改變了這種代碼

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

，並把

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