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

Question

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 1

Works ok for me:

$('a.popup-ajax').popover({     "html": true,     "content": function(){         var div_id =  "tmp-id-" + $.now();         return details_in_popup($(this).attr('href'), div_id);     } });  function details_in_popup(link, div_id){     $.ajax({         url: link,         success: function(response){             $('#'+div_id).html(response);         }     });     return '<div id="'+ div_id +'">Loading...</div>'; } 

Answer 2

See my blog post for the working solution: https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4

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.