javascript - Twitter bootstrap:Popovers are not showing up on first click but show up on second click - Stack Overflow

admin管理员组

文章数量:1185436

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?

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?

• javascript
• django
• twitter-bootstrap

Share Improve this question Follow edited Apr 1, 2018 at 18:29 nikiforovpizza 57622 gold badges77 silver badges1313 bronze badges asked Sep 8, 2012 at 18:57 Rajat SaxenaRajat Saxena 3,91566 gold badges4848 silver badges6767 bronze badges 3

• Do you need to call popover when the page loads? $('a.reviews#like').click(...).popover() – gray state is coming Commented Sep 8, 2012 at 19:02
• Did you try out the solution yet? Were you able to hide the popover on the second click? – markus Commented Jan 29, 2013 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. – user2023377 Commented Jan 29, 2013 at 22:39

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 27

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.

本文标签：