CambridgeMike CambridgeMike - 6 months ago 536
jQuery Question

Load a Bootstrap popover content with AJAX. Is this possible?

The appropriate bits of what I tried are here:

<a href="#" data-content="<div id='my_popover'></div>"> Click here </a>

$(".button").popover({html: true})

$(".button").click(function(){
$(this).popover('show');
$("#my_popover").load('my_stuff')
})


When I click, I see the request get made, but doesn't populate the popover. I don't even see HTML for the popover get added to the DOM, but that could be firebug.

Has anyone tried this?

Answer

See my blog post for the working solution: http://www.cagataygurturk.com/load-a-bootstrap-popover-content-with-ajax/

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.

Comments