link_toとremote => true + jquery ajax：success

Question

ページ上のコンテンツを更新するためにリモート呼び出しを行う1つのページに多数のリンクがあります。すべてが完全に機能するので、コンテンツを読み込んでいる要素にオーバーレイを追加して、顧客に何か起きていることを視覚的に知らせることにしました。

オーバーレイを表示したい各リンクに、クラスに加えてデータ属性を介してdivに渡します。オーバーレイをオンにします。ここにいくつかのコード例があります。

<div id="content">Old Content</div> 
<%= link_to "Update Content", some_path, :class => 'ajax_trigger', :remote => true, 'data-target' => 'content' %> 

[OK]をクリックしたときにそれがオフ動作し、私は、コンテンツすなわちを交換respond_toブロックformat.jsでデータをロードし、

$("#content").html("<%= escape_javascript(render(:partial => '/shared/content')) %>") 

など、私はすべてが素晴らしい作品と述べています。わかりましたので、私はオーバレイを行うJS（コーヒースクリプト）のグローバルビットを持っています。

$(".ajax_trigger").live("ajax:beforeSend", (evt, data, status, xhr) -> 

    # Get target div to add overlay 
    target = $(this).data('target') 
    $t = $("#"+target) 

    # Update CSS for Overlay 
    $("#overlay").css 
     opacity: 0.7 
     top: $t.offset().top 
     left: $t.offset().left 
     width: $t.outerWidth() 
     height: $t.outerHeight() 

    # Update Image for Overlay 
    $("#img-load").css 
     top: ($t.height()/2) 
     left: ($t.width()/2) 

    # Show Overlay 
    $("#overlay").fadeIn() 

).live("ajax:success", (evt, data, status, xhr) -> 
    $("#overlay").fadeOut() 
).live "ajax:error", (evt, data, status, xhr) -> 
    alert "Failed!" 

これはページ上の2つの項目に最適ですが、1つはオーバーレイを表示しますが、非表示にはしません。私はもちろん、AJAXのようにエラーが発生していません：警告は私に警告を与える。コンテンツはオーバレイで完璧に読み込まれます。

私は良いレスポンスとコンテンツを置き換えたにもかかわらず違いがあり、それが隠されない理由を見ることはできません。

どのように私はこれをデバッグできますか？

Answer 1

あなたの問題が説明だけであるとは分かりません。 FirebugやChrome Developer ToolsなどのJavaScriptデバッガを使用しましたか？スクリプトを探し、ブレークポイントを設定し、問題のあるリンクをクリックしてコードを実行します。