I am trying to change the content of the popover when a button add to cart is clicked. when the button is clicked the popover should show the bill by multiplying 125 with the number of items chosen. But even after clicking the add to cart button the popover still shows your cart is empty. I have added the code snippet below
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
document.getElementsByClassName("adcart")[0].addEventListener('click',addcart);
document.getElementsByClassName("btnminus")[0].addEventListener('click',decrement);
document.getElementsByClassName("btnplus")[0].addEventListener('click',increment);
/*** These two functions (increment ,decrement) are for working of plus and minus buttons***/
function decrement( ){
var x =parseInt(document.getElementsByClassName("form-control")[0].value);
if (x!=0)
{document.getElementsByClassName("form-control")[0].value= parseInt(document.getElementsByClassName("form-control")[0].value)-1;}
}
function increment( ){
document.getElementsByClassName("form-control")[0].value= parseInt(document.getElementsByClassName("form-control")[0].value)+1;}
/** This is the function I have written to update the content of popover**/
function addcart(){
document.getElementsByClassName("poper")[0].dataset.bsContent="YOUR total bill is " + parseInt(document.getElementsByClassName("form-control")[0].value)*125;}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button" class="btn btn-lg poper" data-bs-toggle="popover" title="CART" data-html="true" data-bs-Content="Your cart is empty"> popover</button>
<div class="quantity d-inline-block">
<input class="btn btnminus d-inline" type="button" value="-" >
<input class="form-control d-inline itemnumber" value='0' aria-label="Username" aria-describedby="addon-wrapping">
<input class="btn btnplus d-inline" type="button" value="+" >
</div>
<button type="button" class="btn btn-lg adcart">Add to cart</button>
</div>Bootstrap popover did not support dynamic content by default. There is update() method but it is just for position not content.
It seems there is no method to update dynamic content, then I use disable() to disable the popover ability and then re-activate it again.
To update content, you have to do it on add item to cart. The example code is below.
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
document.getElementsByClassName("adcart")[0].addEventListener('click', addcart);
document.getElementsByClassName("btnminus")[0].addEventListener('click', decrement);
document.getElementsByClassName("btnplus")[0].addEventListener('click', increment);
/*** These two functions (increment ,decrement) are for working of plus and minus buttons***/
function decrement() {
var x = parseInt(document.getElementsByClassName("form-control")[0].value);
if (x != 0) {
document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) - 1;
}
}
function increment() {
document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) + 1;
}
/** This is the function I have written to update the content of popover**/
function addcart() {
document.getElementsByClassName("poper")[0].dataset.bsContent = "YOUR total bill is " + parseInt(document.getElementsByClassName("form-control")[0].value) * 125;
popoverTriggerList.map(function(popoverTriggerEl) {
popover = bootstrap.Popover.getOrCreateInstance(popoverTriggerEl);
popover.hide();// hide, in case that it is opening.
popover.disable();
new bootstrap.Popover(popoverTriggerEl);
})
}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button" class="btn btn-lg poper" data-bs-toggle="popover" title="CART" data-html="true" data-bs-Content="Your cart is empty"> popover</button>
<div class="quantity d-inline-block">
<input class="btn btnminus d-inline" type="button" value="-">
<input class="form-control d-inline itemnumber" value='0' aria-label="Username" aria-describedby="addon-wrapping">
<input class="btn btnplus d-inline" type="button" value="+">
</div>
<button type="button" class="btn btn-lg adcart">Add to cart</button>