0

ページのコンテンツを更新するためにリモート呼び出しを行う 1 つのページに多数のリンクがあります。すべてが完璧に機能するので、コンテンツをロードする要素にオーバーレイを追加して、何かが起こっていることを視覚的に参照できるようにすることにしました。

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

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

わかりましたので、クリックすると実行され、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:alert で警告が表示されるため、エラーは発生しません。コンテンツはオーバーレイに完全に読み込まれるため、すべて問題ありません。

どのように違いがあり、良い反応を得てコンテンツが置き換えられたにもかかわらず、なぜそれが隠されないのかわかりません。

これをデバッグする方法について何か提案はありますか?

4

1 に答える 1

0

説明だけでは問題が何なのかわかりません。FirebugやChromeデベロッパーツールなどのJavaScriptデバッガーを使用しましたか？スクリプトを見つけ、ブレークポイントを設定し、面倒なリンクをクリックして、コードをステップ実行します。

于 2012-05-08T19:31:44.870 に答える