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> Save 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.
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.
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> Save 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.'});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With