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

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,popover doesn't show up on 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 it's toggle behavior from there onwards.And ideas?

Answers


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.


Need Your Help

Eclipse hangs on startup, but second eclipse instance works

eclipse pydev startup hang

I use Eclipse Java EE IDE Kepler for Web Developers with pydev.

puppetlabs/postgresql examples not working

puppet

I am trying to use the puppet module puppetlabs/postgresql. I am very confused as to how to use it. Anyone can give me an example ? the documentation tells to create the class with settings but i a...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.