Dynamically change content of popover in bootstrap

Question

I am trying to change the content of bootstrap popover dynamically but it is not working. Fiddler: https://jsfiddle.net/99x50s2s/62/

HTML:

<button class="btn btn-danger btn-xs" id="SaveChangesBtn" type="button" data-toggle="popover" data-trigger="manual" data-content="There are no changes to save."><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>&nbspSave Changes</button>

JS:

$('#SaveChangesBtn').on('click', function(){
    $(this).popover('hide');
    $(this).popover({content: 'Cannot proceed with Save while Editing a row.'}).popover('show');        
});

Current Result:

When Save changes button is clicked, the content 'There are no changes to save' is displayed.

Expectation:

The dynamic content "Cannot proceed with Save while Editing a row." should be displayed.

Any help is appreciated.

Answer 1

You can try something like this:

$('#SaveChangesBtn').on('click', function(){
if($('.popover').hasClass('in')){
    $(this).popover('hide');
}
else
{
    $(this).attr('data-content','Cannot proceed with Save while Editing a row.');
    $(this).popover('show');
}
});

This way you fix the way you are showing and hiding your popover.

Working fiddle: https://jsfiddle.net/99x50s2s/65/

Answer 2

you can set a popover by javascript only if you want it to be dinamyc , you dont have to define the fields in the html.

so delete the html that make the button a popover , and create with javascript, like this:

   <button class="btn btn-danger btn-xs" id="SaveChangesBtn" type="button"  ><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>&nbspSave Changes</button>

so the button is not defining the tooltip, because you are going to create with javascript

      $('#SaveChangesBtn').on('click', function(){

         $(this).popover({content: 'Cannot proceed with Save while Editing a row.'});

     });

Answer 3

I can show you my solution; You may analize it, see if it helps;

 $('#popover').on('click', function(e) { e.preventDefault(); e.stopPropagation(); // get the content based on the basis case; if (document.getElementById('checkbox_approval').checked == true) { // for the case where it is already checked var title = 'De-Activate Feature?'; var content = 'some other text here. <br><br> ' + '<button type="button" onclick="document.getElementById(\\'checkbox_approval\\').checked=false;' + '$(\\'#popover\\').popover(\\'destroy\\')">' + 'De-Activate' + '</button>' + '<button type="button" onclick="$(\\'#popover\\').popover(\\'hide\\')">' + 'Cancel' + '</button>'; } else { var title = 'Activate Feature?'; var content = 'some text here. <br><br> ' + '<button type="button" onclick="document.getElementById(\\'checkbox_approval\\').checked=true;' + '$(\\'#popover\\').popover(\\'destroy\\')">' + 'Activate' + '</button>' + '<button type="button" onclick="$(\\'#popover\\').popover(\\'hide\\')">' + 'Cancel' + '</button>'; } // popover controller $(this).popover({ html: true, title: title, content: content, placement: 'bottom', template: '<div class="popover" role="tooltip" style="width:320px;">' + '<div class="arrow"></div>' + '<h3 class="popover-title"></h3>' + '<div class="popover-content"></div>' + '</div>' }).popover('show'); });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row"> <div class="col-lg-12 col-md-12"> <a id="popover" class="btn btn-danger">Click to toggle popover</a> </div> <div class="col-lg-12 col-md-12"> <label>Hidden/vissible chcker for dynamic controll <input type="checkbox" disabled="disabled" id="checkbox_approval" name="checkbox_approval"> </label> </div> </div>

Answer 4

I have been dynamically changing content of Bootstrap 4 popovers using something like this:

$('#SaveChangesBtn').data('bs.popover').element.dataset.content = 'Cannot proceed with Save while Editing a row.';

I believe once you initialize the Popovers on your page, Bootstrap then puts all the information into the data attribute bs.popover which Bootstrap uses to build the content of that popover.

Answer 5

Using Bootstrap 4.5.2 with Popper 1.11 I was able to get it working using;

var divElem = $('#myPopperDiv');
divElem.data('bs.popover').element.dataset.content = dynamicString;
divElem.data('bs.popover').setContent();

where dynamicString is content that is updated every 1 second using an interval.

Note: One thing to keep in mind, is the divElem.data('bs.popover') doesn't exist until after the first time the user click's the pop-over button. since I'm updating it in a callback, I check

if(divElem.data('bs.popover')) {
  divElem.data('bs.popover').element.dataset.content = dynamicString;
  divElem.data('bs.popover').setContent();
}

Answer 6

只需从按钮声明中删除 'data-content' 属性。