32

これは私のマークアップです:

<a href="#" class="reviews" id="like" rel="popover" data-content="" data-placement="right" data-original-title="Like episode">
    <i class="icon-thumbs-up"></i> 
    Loved it
</a>(<span id="episode_likes">{{ episode_likes }}</span>

これが JavaScript です。

$('a.reviews#like').click(function(e){
    var element = $(this);
    $.ajax({
        url: '/episoderatings/like/',
        type: 'POST',
        dataType: 'json',
        data: {
            csrfmiddlewaretoken: '{{ csrf_token }}',
            episode_number: current,
            story: current_story
        },
        success: function(response){
            if(response=='You have liked this episode'){
                $('span#episode_likes').text(parseInt($('span#episode_likes').text())+1);
            }
            $(element).attr('data-content',response);
            $(element).popover();
        }
    });
    e.preventDefault();
});

問題は、「いいね」ボタンをクリックしたときに、最初のクリックでポップオーバーが表示されないため、ページが気に入ったかどうかに関係なく、重要な応答を見逃すことです。「いいね」ボタンをクリックすると、2回目にポップオーバーが表示され、それ以降はトグル動作が維持されます。何か案は？

4

1 に答える 1

27

リンクを最初にクリックしたとき、表示できるポップオーバーはまだ初期化されていません。への呼び出しでポップオーバーを初期化します$(element).popover();。そのため、コードはリンクをクリックした後にポップオーバーを初期化し、最初は何も表示されません。2 回目にクリックすると、ポップオーバーが表示されます。

.popover()リンクをクリックする前に を呼び出す必要があります。あなたの場合

$('a.reviews#like')
    .popover({trigger: 'manual'})
    .click(function(e){
        var element = $(this);
        $.ajax({
            url: '/episoderatings/like/',
            type: 'POST',
            dataType: 'json',
            data: {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                episode_number: current,
                story: current_story
            },
            success: function(response){
                if(response=='You have liked this episode'){
                    $('span#episode_likes').text(parseInt($('span#episode_likes').text())+1);
                }
                $(element).attr('data-content',response).popover('show');
            }
        });
        e.preventDefault();
    });

トリックを行う必要があります。

行 2の呼び出しに注意してください.popover({trigger: 'manual')。これにより、ポップオーバーが初期化され、クリック後にすぐに表示されなくなります。そのコンテンツを AJAX コールバックで設定すると、すぐにポップオーバーが表示されなくなるため、これは役に立ちません。したがって、コールバックでは、属性.popover('show')を設定した後、手動で呼び出す必要があります。data-content

.popover('hide')もう 1 つ:ポップオーバーを表示した後、ある時点で呼び出す必要があります。リンクをもう一度クリックしても、AJAX 呼び出しはもう一度トリガーさ.popover('show')れ、再度呼び出されるため、消えることはありません。考えられる解決策の 1 つは、ポップオーバーがアクティブなときにリンクにクラスを追加し、クリックするたびにそのクラスをチェックすることです。クラスが存在する場合は、クラスを呼び出し.popover('hide')て削除できます。そうでない場合は、AJAX 呼び出しを実行します。私が何を意味するかを示すために、小さな jsfiddleを作成しました。

詳細については、ドキュメントを参照してください。

それが役立つことを願っています。

于 2012-09-08T19:35:51.030 に答える