Twitter bootstrap:Popovers are not showing up on first click but show up on second click

Question

This is my markup:

<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>

And this is the 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();
});

The problem is when I click on 'like' button, the popover doesn't show up on the first click so I miss the important response whether I've liked the page or not. When I click on the 'like' button, the second time popover shows up and it then maintains its toggle behaviour from there onwards. Any ideas?

Answer 1

When you first click on your link, there is no popover initialized yet, that could be shown. You initialize the popover with the call to $(element).popover();. So, your code initializes the popover after the click on the link and nothing is shown the first time. The second time you click it, the popover is there and can be shown.

You must make the call to .popover() before the link is clicked. In your case

$('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();
    });

should do the trick.

Notice the call to .popover({trigger: 'manual') in line 2. That initializes the popover and disables that it appears at once after you clicked. That wouldn't be helpful, since you set its content in the AJAX callback, and no sooner the popover can be shown. So, in the callback, you must now call .popover('show') manually, after you have set the data-content attribute.

One more thing: You have to call .popover('hide') at some point after you showed the popover. It will not disappear when you click on the link again, since then the AJAX call is only triggered once more and .popover('show') is called again. One solution I can think of is adding a class to the link when the popover is active and check for that class on each click. If the class is there, you can just call .popover('hide') and remove the class, else do your AJAX call. I created a small jsfiddle to show what I mean.

For more info look at the docs.

Hope that helps.