4

クリックするとajax呼び出しがトリガーされ、このリンクを別のリンクに置き換えるリンクがあります。たとえば、元のリンクは「友達を追加」です。このリンクをクリックすると、add_friendアクションにajaxリクエストが送信されます。友達が追加された場合、上記のリンクは別のリンク「リクエストのキャンセル」に置き換えられます。そのために ujs を使用します。

$("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>")

コールバック (:success および :complete) を追加しようとしても機能しません。次のように :beforeSend を試してみました。

$(document).ready ->
  $("#my_link").on "ajax:beforeSend", ->
    alert("hello")

成功と完全なコールバックの解決策はありますか?

注：私の考えは、ajaxStartがトリガーされたときにloader.gifを表示し、少なくともajax：completeコールバックがトリガーされたときにそれを非表示にすることです。また、エラーがある場合は、ajax：errorがトリガーされたときに表示したい

アップデート

次のように、action.js.erb 内のコードを js ファイルに移動して、これを解決しようとしました。

  $(document).ready ->
  $(document).on("ajax:success", "a.invitation-box", ->
    $("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>")
  ).on "ajax:error", "a.invitation-box", ->
    alert "error"

ただし、この方法では render('users/cancel_link') を JS ファイル内に配置することはできません

4

4 に答える 4

8

私は同じ問題を抱えていましたが、問題は ajax:success または ajax:complete コールバックにはありません。問題は、読み込み中の gif 画像を表示するときに、リンク自体を含むコンテナーのコンテンツを置き換えることです。したがって、success, complete コールバックを適用する要素は、もはや DOM の一部ではありません。そのため、コールバックは起動されません。

1 つの解決策は、次のように、要素を非表示にして読み込みイメージを追加することです。

$('#my_link').on "ajax:send", (event, xhr, settings) ->
        $('#my_link').hide()
        $("#my_link_container").append("<image src = 'img.gif' />")

次に、成功と完了のコールバックが発生します。それが誰かを助けることを願っています:)

于 2014-03-22T12:25:03.750 に答える
3

あなたの問題は、オブジェクトが変更されたため、JS がオブジェクトにバインドできないことにあると思います。JS が機能する方法は、DOM (Document Object Model) 内の要素に自分自身を「バインド」/「アタッチ」することです。DOM は基本的に、JS が特定の関数を呼び出すために使用する要素の膨大なリストであり、これらの要素にさまざまな関数を割り当てることができます。これが、さまざまな要素で「クリック」関数を呼び出す方法です。

基本的に、Ajax を呼び出した元のオブジェクトを置き換えているため、「ajax:success」が発生した場合、JS はどのオブジェクトに関連付けるかを知る方法がないため、関数の起動が妨げられます。

これを回避する方法は、ドキュメントにバインドしてから、次のようにバインドを div に委任することです。

$(document).on 'ajax:success' , '#my_link', ->
  //do stuff here

これは、この要素が動的に変更されたとしても、関数がバインドされているため、必要なものが得られることを意味します:)

于 2013-10-15T15:48:16.253 に答える