Search code examples
twitter-bootstraptwitter-bootstrap-3bootstrap-popover

Bootstrap popover custom template not work


I'm trying to set a custom template to a popover using options, but the template is never added. Why? this is the code. I need that method to work, because i can't use the method .popover(ecc..)

HTML:

<button type="button" data-loading-text="..." data-placement="bottom" id="selectRecipientsBtn"
                                data-toggle="popover" data-trigger="manual" 
                                class="btn btn-default dropdown-toggle destinatariDiv">
                                <span class="caret"></span>
                            </button>


$('#selectRecipientsBtn').click(function(e) {
    e.preventDefault(); 
    loadManagers("<c:url value='/secure/send/managers' />");
});



function loadManagers(urlToLoad){ var popoverTemplate = '<div class="popover popover-managers"><div class="arrow"></div>'+
            '<h3 class="popover-title"></h3><div class="popover-content">'+
            '</div><div class="popover-footer"></div></div>';function loadManagers(urlToLoad) {

$("#selectRecipientsBtn").button('loading');

$.ajax({
    type : 'GET',
    url : urlToLoad,
    success : function(data, status, xhr) {
        $("#selectRecipientsBtn").button('reset');
        $("#selectRecipientsBtn").data("bs.popover").options.html=true;
        $("#selectRecipientsBtn").data("bs.popover").options.title='ciao';
        $("#selectRecipientsBtn").data("bs.popover").options.trigger='manual';
        $("#selectRecipientsBtn").data("bs.popover").options.content=data;
        $("#selectRecipientsBtn").data("bs.popover").options.template= popoverTemplate; 
        $("#selectRecipientsBtn").popover("show");

    },
    error : function(xhr, status, error) {
        alert("error");
    },
});

}

Solution

  • Have you tried:

    $("#selectRecipientsBtn").popover({
        title:'ciao',
        trigger:'manual',
        content:data,
        template:popoverTemplate
    });
    $("#selectRecipientsBtn").popover("show");