9

**問題は実際にはレールがajax：success関数にバインドできないことにあることがわかったため、この投稿を編集しました。

***レールの使用3.2.3

読んで助けてくれてありがとう。

次のように、ajax：success ofaitemの削除に簡単なフェードアウト機能を追加しています。

$(document).ready( jQuery(function($) {
    $('.delete').bind('ajax:success', function() {
        $(this).closest('div').fadeOut();
    });
}));
#For some reason had to pass the $ into the function to get it to work,
#not sure why this is necessary but doesn't work unless that is done.

この後、ユーザーが何かを追加したときに目立たないjQueryを使用してオブジェクトを作成し、それらにも削除ボタンを機能させたいと思いました。新しいアイテムの作成後に呼び出されるcreate.js.erbファイルを作成しました。作成は正常に機能しますが、削除ボタンでajax：successイベントにアクセスできません。

クリックするとデータベースからデータが削除されますが、.fadeOutがバインドされることはないため、データは消えません。create.js.erbは次のとおりです。

#$("div").append(html) here, then call the function below to try and bind the ajax:success function
$('.delete').bind('ajax:complete', function() {
    $(this).closest('div').fadeOut();
});

これをクリック関数にバインドするように変更すると、機能しますが、これは失敗したajax呼び出しの原因にはなりません。

#$("div").append(html) here, then call the function below to try and bind the ajax:success function
    $('.delete').bind('click', function() {
        $(this).closest('div').fadeOut();
    });

したがって、アイテムが作成された後、何かがajax：successにバインドされている必要があります。なぜこれが起こっているのか分かりますか？新しくレンダリングされたアイテムにajaxイベントを認識させるために、Railsで何か特別なことをする必要がありますか？どんな方向でも大歓迎です！

PS誰かがそこで問題を検出できるかもしれない場合に備えて、deleteメソッドのコントローラーを以下に示します。

def destroy
    @user = User.find(params[:user_id])
    @item = @user.item.find(params[:id])
    @item.destroy

    respond_to do |format|
      format.html { redirect_to user_path(@user) }
      format.json { head :no_content }
      format.js { render :nothing => true }
    end
end
4

7 に答える 7

18

問題は、要素が生成される前にバインドが発生しているように聞こえます。これを試して：

$(document).on('ajax:success', '.delete', function(e) {
    $(e.currentTarget).closest('div').fadeOut();
});
于 2012-08-31T19:19:07.043 に答える
12

フォーム ハンドラー メソッドがプレーンな文字列を返したため、同じ問題が発生しました。jQuery が処理できるものを必ずレンダリングしてください。

def handle_form
  ...
  render :json => {:what => 'ever'}
  # or
  render :nothing => true
end
于 2012-11-07T11:46:05.533 に答える
1

最近、Rails 3.2.3 を使用して同様のことを行いました。私も使っています

$('#dialog-form').bind('ajax:success', function() {
})

そしてそれはうまく動作します...

于 2013-08-15T19:40:46.970 に答える
1

これは古い質問ですが、同じ問題であると判明したものに対する最新の回答があります。

バージョン 1.9 の時点で、jQuery は空の応答 (何もレンダリングしない: true) を成功/完了と見なしなくなりました。これは、コントローラーで代わりに空の JSON オブジェクトを返す必要があることを意味します。

respond_to do |format| format.json { render: {}.to_json } end

于 2014-09-15T19:38:29.133 に答える
0

私にとっては、slim を使用しており、テンプレートが「name.slim」であるためです。それらを「name.slim.html」に変更すると、ajax:success が正しく起動します。

私が使用している解決策は、コントローラーのレンダリング宣言にフォーマットを追加することです。

したがって、次のようなものがあります。

render :new, layout: false, formats: [:html]
于 2015-10-16T18:11:38.423 に答える
0

それは古い質問ですが、カスタム確認ダイアログがあり、 ajax:success がまったく異なる要素でトリガーされていたため、どの回答も本当に役に立ちませんでした。

このような場合に ajax によってトリガーされる要素を見つけるには、最初にコードを使用できます。

$(document).on('ajax:success', 'a', function(evt, data, status, xhr) {
    $( ".log" ).text( "Triggered ajaxComplete handler." );
    // Check what is the value of $(this), and you will see what button has triggered the ajax success action, and you can start from there
});
于 2016-09-12T23:38:31.320 に答える