Loading dynamic content into Bootstrap Popover after form submit

Question

I'm trying to load content dynamically into a Bootstrap popover. When the form is submitted I can alert the value; that's working correctly. What I can't do is get the content of #popover-thanks to load in the popover, replacing the form with a thank you message.

// show the popover
$('#btn').popover({
    html : true,
    placement: 'top',
    content: function() {
        return $('#popover-form').html();
    }
}); 

// form has been submitted
$(document).on('click', '#submit', function() {

    var value = $('#value').val();

    alert(value);

    $('#btn').popover({ 
        html : true,
        content: function() {
            return $('#popover-thanks').html();
        }
    });
});

Answer 1

i think you must Destroy the first popover to be able to make new one on same element:

$( '#btn' ).popover('destroy');

http://getbootstrap.com/javascript/#popovers-usage

• Another solution, you can get the popover id (after show) like that:

  var popoverID = $( '#btn' ).attr("aria-describedby"); // = 'popover123456' (random number)
  

replace the content (http://getbootstrap.com/javascript/#popovers), and then show it:

$( '#btn' ).popover('show');