0

i would like use the Bootstrap Popover with ajax templates. The next script running good,...

$('.popover-trigger').bind('click', function(k) {

                var e=$(this);
title="Jeepieee"
                $.get('/popover/'+e.data('pophtml'),function(d) {
                    e.popover({
                          content: d,
                          container: 'body',
                          title: title,
                          html: true
                        }).popover('show');
                });
});

...but, if I open the popover by the first send a ajaxcall, this is right. I open the popover again, it showed me my html, but the html from the popover is old and not ajax-call..

When i use $().popover('destroy'), then i have no click-event on my button and it opens nothing.

if I have multiple, will make matters worse.

Moo
  • 87
  • 6

1 Answers1

1

Loading a content via AJAX in a Bootstrap popover is a very common pattern and, although it is not supported out of the box by Bootstrap, it is very easy to get this functionality with jQuery.

First we should add a data-poload attribute to the elements you would like to add a pop over to. The content of this attribute should be the url to be loaded (absolute or relative):

<a href="#" title="blabla" data-poload="/test.php">blabla</a>

And in JavaScript, preferably in a $(document).ready();

$('*[data-poload]').hover(function() {
    var e=$(this);
    e.off('hover');
    $.get(e.data('poload'),function(d) {
        e.popover({content: d}).popover('show');
    });
});

off('hover') prevents loading data more than once and popover() binds a new hover event. If you want the data to be refreshed at every hover event, you should remove the off.

Please see the working JSFiddle of the example.

Rohit Goyani
  • 1,246
  • 11
  • 26
  • nope! by hover it's running, but not bei click-event. I need click-event, because I work with a form inside in the popover. – Moo Jun 25 '16 at 22:13
  • So, Just change hover event to click event. see the demo : [JsFiddle](https://jsfiddle.net/DTcHh/22082/) – Rohit Goyani Jun 26 '16 at 06:24
  • No! set under options html of true an have more as one event and the equal response of $get, as is instabil unstable. – Moo Jun 26 '16 at 07:16