Estoy tratando de cambiar el contenido de la ventana emergente cuando se hace clic en un botón Agregar al carrito. cuando se hace clic en el botón, la ventana emergente debe mostrar la factura multiplicando 125 con el número de artículos elegidos. Pero incluso después de hacer clic en el botón Agregar al carrito , la ventana emergente aún muestra que su carrito está vacío. He agregado el fragmento de código a continuación
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 no admitía contenido dinámico de forma predeterminada. Hay un método de update() , pero es solo para la posición, no para el contenido.
Parece que no hay ningún método para actualizar el contenido dinámico, luego uso disable() para desactivar la capacidad de popover y luego la vuelvo a activar.
Para actualizar el contenido, debe hacerlo en Agregar artículo al carrito. El código de ejemplo está debajo.
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>