0

AIユーザーが画像へのリンクのリストをクリックすると、画像付きのファンシーボックスモーダルを表示すると思われるページがあります。ロード中のページにこれがあります

        $('a#couponLink').fancybox({
          'opacity'       : true,
          'overlayShow'   : false,
          'transitionIn'  : 'elastic',
          'transitionOut' : 'none'
        });

リンクを考える:

<a href="images/<%= coupon.couponImageURL %>" id="couponLink" class="view">View Coupon ></a>

ページをajaxで動的にする前は、すべて機能していました。ただし、リスト内のオブジェクトのリストをフィルター処理する index.js.erb ファイルを処理する ajax フィルターをいくつか追加しました。ajaxリクエストを発射した後、上記のリンクはモーダルの読み込みに失敗し、画像のページに移動し、モーダルに読み込まれませんか?

何が原因なのか、または問題を診断する方法がわかりませんか? ファンシーボックスが起動しない理由を確認するための指針はありますか?

私が調べた 1 つの可能性は、私の index.js.erb ファイルにありました。

<% if session[:zip] and !(session[:zip].blank?) %>
$.fancybox.close();
 <% end %>

新しいユーザーがページを表示したときに読み込まれると思われる特定のモーダルを閉じるには、いくつかのセッションパラメーターを設定すると、表示されなくなると想定されます。これらは、異なるクラスを持つ同じページ上の 2 つの異なる fancybox モーダルです。しかし、ファンシーボックスの終了を呼び出すと、画像のモーダルに影響しますか?

ajax リクエストの後にソースを見ると、適切なライブラリがすべて読み込まれているのがわかりますか?

ページをリロードすると、画像リンクの fancybox 機能が復元されます。奇妙な、私は知っています。

ヘルプ。

4

1 に答える 1

0

私はこれを次のように解決しました: 1- id の代わりにリンクをクラスに変換します。

どうやらいつ

    $('a.couponLink').fancybox({
    'opacity'       : true,
    'overlayShow'   : true,
    'transitionIn'  : 'elastic',
    'transitionOut' : 'none'
    });

初めて実行されると、ファンシー ボックスを開くために使用できるリンクのリストがトリガーされます。ページの他の場所で任意の形式の ajax 要求が発生すると、このリンクのリストは何らかの形で無効になります。したがって、上記のコードを .js.erb ファイルに再度追加して、すべての ajax リクエストの後に実行されるようにすると、リンクが再登録されます。

于 2012-10-03T16:06:23.420 に答える