LegendaryB3ast LegendaryB3ast - 6 months ago 14
jQuery Question

Dynamically Changing Text in Bootstrap Popovers

I'm looking to create a popover which has multiple pages to it (different content materials) that update when clicking on the popover. The idea is that you toggle the popover and "page1" content loads, clicking on it will load "page2" content.

var $btn = $("#myButton");

$("html").click(function(){
$btn.popover('hide');
});

$btn.popover({title: "Popover", html: "true", trigger: "manual", placement: "top", content: "<div id='page1'>Page 1</div>"}).click(function(e) {
$btn.popover('toggle');
e.stopPropagation();
});


How can I do something along the lines of this:

$("#page1").click(function() {
$btn.popover.options.content = 'Page 2';
});


while incorporating the functionality of closing the popover whenever anything else is clicked, such as in this answer?

Answer

Use .html to change the content and hide the popup when anything other than #page1 is clicked.

$('body').on('click', '#page1', function(e){
    $(this).html('Page 2');
    e.stopPropagation();
});

$("html").on('click', ':not("#page1")',function(){
    $btn.popover('hide');
});

Fiddle

Comments