Twitter Bootstrap Popover and AJAX

Question

I been browsing SO for solutions on how to load an ajax content on bootstrap popover but can't find any decent solutions.

Here's what I have so far:

$(".btnCharge").click(function () {
    $("#boxPayment").fadeIn();
})
.popover({
    title: 'Advantages',
    html: 'true',
    content: function () {
        $.ajax({
            type: "POST",
            url: "Index.aspx/FindAdvantagesByCCID",
            data: '{"id": "' + 1 + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var json = jQuery.parseJSON(data.d);
                var html = '';
                $.each(json, function (i, item) {
                    html = html + '<a href="#"><i class="icon-ok"></i>' + item.Advantage + '</a><br />';
                });
            }
        });
    },
    placement: 'bottom',
    trigger: 'hover'
});

How can i add the ajax response to popover content? I tried "return" and doesnt work.

Any clean solutions?

Answer 1

Yes. it is possible. And it has been answered already.

Using data- attributes you can provide the URL, like here:

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

Now the handler:

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

unbind('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 modify this a bit.