BOOTSTRAP POPOVER NOT WORKING

Sanjay Sharma

Total Post:45

Points:315
Posted by  Sanjay Sharma
 1776  View(s)
Ratings:
Rate this:
I have a problem with the bootstrap Popover. It works sometime but other times it doesn't. I use it to generate a popover with a users information when a visitor hovers over the users name. The page is generated by ajax so at first I thought that it simply was an issue of content being loaded after but the issue is that it works sometimes.

javascript code here:

$(document).on('mouseenter', '.postusername', function (e) {

        var userid = this.parentElement.parentElement.children[0].innerHTML;

        var te = this;

        if (userid) {

            $.get('/Requests/getuinfo.php', { id: userid })

            .done(function (data) {

                var uinfo = JSON.parse(data);

                boo = uinfo;

                $(te).popover({

                    html: true,

                    template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',

                    content: '<div class="popover-holder" style="background-image:url(\'/Style/Media/CoverPics/' + uinfo.coverpic + '\');">' + uinfo.name

                    + '</div>',

                    placement: 'auto'

                });

                $(te).popover('show');

            });

        }

    });

 

    $(document).on('mouseleave', '.postusername', function (e) {

        $(this).popover('hide');

    });

  1. Elena Glibart

    Post:42

    Points:296
    Re: Bootstrap Popover not working

    As you've found, the problem was the fact that you were trying to create a new popover for something when it had already been done. Removing the popover after hiding it has fixed that problem.

    However, this should fix the problem without removing it, and will mean you will also only get user information once per user.

    var userids = [];

     

        $(document).on('mouseenter', '.postusername', function (e) {

            var userid = this.parentElement.parentElement.children[0].innerHTML;

            var te = this;

            if (userid) {

                if (userids.indexOf(userid) === -1) {

                    $.get('/Requests/getuinfo.php', { id: userid })

                    .done(function (data) {

                        var uinfo = JSON.parse(data);

                        boo = uinfo;

                        $(te).popover({

                            html: true,

                            template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',

                            content: '<div class="popover-holder" style="background-image:url(\'/Style/Media/CoverPics/' + uinfo.coverpic + '\');">' + uinfo.name

                            + '</div>',

                            placement: 'auto'

                        });

                        $(te).popover('show');

                        userids.push(userid);

                    });

                }

                else {

                    $(te).popover('show');

                }

            }

        });

     

        $(document).on('mouseleave', '.postusername', function (e) {

            $(this).popover('hide');

        });

    It keeps an array of the user ids that you've got info for, and only gets the info if you've not already done it.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!