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?

Do you need to call `popover` when the page loads? `$('a.reviews#like').click(...).popover()` — gray state is coming, Sep 08 '12 at 19:02
Did you try out the solution yet? Were you able to hide the popover on the second click? — markus, Jan 29 '13 at 22:32
Yes. I tried out the answer. It only works for popovers with normal text, but does not work for popovers which has its data-content as the 'html' generated form the ajax response. — , Jan 29 '13 at 22:39

j0ker · Accepted Answer · 2012-09-09T01:05:08.017

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.

The problem is still there.The body of popover is not receiving the response returned by ajax call. — Rajat Saxena, Sep 08 '12 at 20:17
You're right, I didn't notice that. The problem was, that the popover is executed as soon as you click on the link. But as this time the `data-content` is not yet set. I've rewritten my post. Be sure to read not only the code but also the explanation about how to hide the popover. — j0ker, Sep 09 '12 at 01:09
Great solution! This approach helped me deal with the exact same problem I had. — CountD, Feb 06 '14 at 23:48
@j0ker: Since its a old post, but your fiddle http://jsfiddle.net/npq3A/ helped me to solve my current problem. Thanks. — Arulkumar, Apr 09 '15 at 10:51

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

1 Answers1

Linked