Home > DeveloperSection > Forums > Bootstrap Popover not working
Sanjay Sharma
Sanjay Sharma

Total Post:45

Points:315
Posted on    October-31-2014 12:17 AM

 Bootstrap JQuery  JavaScript  Twitter Bootstrap 3  CSS 
Ratings:


 1 Reply(s)
 1237  View(s)
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');

    });



Elena Glibart
Elena Glibart

Total Post:35

Points:128
Posted on    October-31-2014 12:19 AM

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.


Don't want to miss updates? Please click the below button!

Follow MindStick