Bootstrap popover content not getting changed with JavaScript

Question

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;}

user_128761 · Answer

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);
    })
}

See it on jsfiddle.

Bootstrap popover content not getting changed with JavaScript

1 Answers