Bootstrap popover change html content

Question

I need to change the popover content inside the bootstrap popover frequently. To make that i created the popover with the content, for the next time i destroyed the popover and created again. But its not working as expected. The issue is its only working on even times, ie. for the 1st time it works for second its not working for third its working and so on.

I have created my scenario as

HTML

<div id="today_not_to_doctr">
  note
</div>
<button id="test">
  haii
</button>

Javascript

var i = 0;
var content = "<div>haiii</div>" + i;

$('#today_not_to_doctr').popover({
  title: "<h5>Note to Doctor</h5>",
  content: content,
  html: true,
  placement: "bottom",
  viewport: {
    selector: 'body',
    padding: 20
  }
});

$('#test').on('click', function() {
  i++;
  content = "<div>haiii</div>" + i;
  $('#today_not_to_doctr').popover('destroy');
  $('#today_not_to_doctr').popover({
    title: "<h5>Note to Doctor</h5>",
    content: content,
    html: true,
    placement: "bottom",
    viewport: {
      selector: 'body',
      padding: 20
    }
  });
});

I have replicated the issue in the fiddle https://jsfiddle.net/sulusfiddle/b8omeph2/

Answer 1

Try this:

 var i = 0; var popover = $('#today_not_to_doctr').popover({ title: "<h5>Note to Doctor</h5>", trigger: 'manual', template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>', content: function() { return "<div>haiii</div>" + i; }, html: true, placement: "bottom", viewport: { selector: 'body', padding: 20 } }); $('#test').on('click', function() { i++; popover.popover("show"); }); 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <div id="today_not_to_doctr"> note </div> <button id="test"> haii </button>