CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrappopover
Kyle Patterson
Kyle Patterson

Reputation: 25

Dynamically altering the template for a Bootstrap popover

I've checked out this question which was asked about dynamically changing Bootstrap popover content. But the solution doesn't seem to be working out for my case where I want to show fresh data to the user every time they press the button to reveal my popover by changing the data-template directly.

here's my .js code:

$(function () {
myUrl = "" + window.location.protocol + "//" + window.location.host + "/" + "Demo/Notification/LoadingStats";


$.ajax({
    url: myUrl,
    type: 'GET',
    success: function (data) {
        $('[data-toggle="popover"]').popover({
        template: data
        });
    }

})

The above code is the working code I have at this moment which displays the data I want correctly, but does not change fluidly or when the user opens it. Only when the page is reloaded does the data update.

The below code is my non-functioning attempt at changing the data-template based on the reference I linked above. It seems to be firing, according to the alerts and debuggers I've thrown inside, but doesn't seem to do anything (it doesn't even display the popover once)

I've even tried using setInterval(myfunction, 2000);

$('[data-toggle="popover"]').on('show.bs.popover', function () {

    $.ajax({
        url: myUrl,
        type: 'GET',
        success: function (data) {
            $('[data-toggle="popover"]').popover({
                template: data
            });
        }

    })
    });
    //these following three lines are firing correctly, just not doing what I want (refreshing the popover)
    var popover = $('[data-toggle="popover"]').data('bs.popover');
    popover.setContent();
    popover.$tip.addClass(popover.options.placement);
})

});

Any ideas on what I might be doing wrong, or how to go about Dynamically changing the data-template of a popover?

UPDATE

I've been overlooking the data-html="true" attribute which is why I've been thinking I had to use the data-template instead of data-content. You can NOT dynamically update the data-template, but you totally can dynamically update the data-content. I hope this helped someone out there who overlooked the data-html.

Upvotes: 0

Views: 1841

Answers (1)

Kyle Patterson
Kyle Patterson

Reputation: 25

I've been overlooking the data-html="true" attribute which is why I've been thinking I had to use the data-template instead of data-content. You can NOT dynamically update the data-template, but you totally can dynamically update the data-content. I hope this helped someone out there who overlooked the data-html.

Upvotes: 2

Related Questions