特定の要素にajaxリクエストをバインドするRails 3.1

Question

それぞれの名前の横に「フォロー」ボタンがあるユーザーのリストがあります。 'フォロー'リクエストはajaxで完了し、フォローボタンが 'unfollow'ボタンに変わります。

私のコードは、リストされた1人のユーザでうまく動作します（また、複数のユーザがリストされた状態でバックエンドで動作します）が、複数のユーザをリストし、フォローリクエストを特定のエレメント'follow_form '各ボタンが含まれているので、クリックされた子の「フォロー」ボタンの1つのみが「アンフォロー」に変わります。

次のように私はトラブル結合を抱えているjqueryのコードは次のとおりです。

/create.js.erb 

    $(".follow_form").html("<%= escape_javascript(render('users/unfollow')) %>") 

と

/destroy.js.erb 

    $(".follow_form").html("<%= escape_javascript(render('users/follow')) %>") 

フォームが明らかに提出された場合、すべての.follow_form要素が変更されているが、私はすることができます」正しい要素をバインドする方法を考えませんか？

私は（create.js.erbのために）しようとしたコードのいくつかの作品の一つでした：

$("input.follow").bind(function() { 
     $(this).closest(".follow_form").html("<%= escape_javascript(render('users/unfollow')) %>") 
    }); 

しかし、応答がありません？

Answer 1

これは、オブジェクトに自動的にバインドされるため、ajax:successコールバックで行う必要があります。

あなたはそれらの.js.erbのファイルを削除し、ちょうどコントローラでそれらをレンダリングすることができます。

def create 
    # creation code here 

    # now render the response 
    render :json => { :new_button => render_to_string(:partial => 'users/unfollow') }, 
     :status => :created 
end 

def destroy 
    # deletion code here 

    # now render the response 
    render :json => { :new_button => render_to_string(:partial => 'users/follow') }, 
     :status => :no_content 
end 

は、その後、あなたのjavascriptファイルに：

$('input.follow, input.unfollow').live('ajax:success', function(data, json, response) { 
    $(this).closest(".follow_form").html(json.new_button); 
}); 
$('input.follow, input.unfollow').live('ajax:error', function(data, xhr, response) { 
    // handle the ajax error here 
});