'How to insert buttons in popover

I am trying to insert html attribute buttons into popover in bootstrap5 by JavaScript.

I am trying to make a clear button with this function below:

But button is not showing. Only text inside the popover.

enter image description here

popStr = popStr + "</div> <a href='/shop/checkout'><button class='btn btn-primary' id='checkout'>Check out</button></a> <button class='btn btn-primary' onclick='clearCArt()' id='clearcart'>Clear cart</button>"
console.log(popStr);
document.querySelector('[data-id="popcart"]').setAttribute('data-bs-content', popStr);
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-id="popcart"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl,

    {
      html: true
    })
});

function clearCart() {
  cart = JSON.parse(localStorage.getItem('cart'));
  for (var item in cart) {
    document.getElementById('div' + item).innerHTML = '<button id="' + item + '"class="btn btn-primary cart">Add To Cart</button>'
  }
  localStorage.clear();
  cart = {};
  updateCart(cart);
}
javascripthtmlbootstrap-5


Solution 1:[1]

You can try using anchor tag instead of a button.

var popover = new bootstrap.Popover(document.querySelector('.my-popover'), {
  container: 'body',
       placement : 'auto',
        html : true,
        title : 'Your Selected Items',
        content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> <a href="#" id="checkOut" class="btn btn-sm btn-success">Check Out</a> <a href="#" class="btn btn-sm btn-danger">Clear Cart</a></div>'
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

   <button type="button" class="btn btn-primary my-popover" data-bs-toggle="popover">Click Me</button>
        
        
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Update for the buttons to work

Firstly i changed popover content

Old version :

content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> <a href="#" id="checkOut" class="btn btn-sm btn-success">Check Out</a> <a href="#" class="btn btn-sm btn-danger">Clear Cart</a></div>'

New version :

I changed anchor href="#" to href="javascript:void(0)" prevent to redirect another place or page.

        content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> <a href="javascript:void(0)" id="checkOut" class="btn btn-sm btn-success">Check Out</a> <a href="javascript:void(0)" class="btn btn-sm btn-danger">Clear Cart</a></div>'

And then i tested. I can catch buttons (anchor) only when popover shown popover._element returns to popover button.

        document.addEventListener("DOMContentLoaded", function(event) {
        popover._element.addEventListener('shown.bs.popover', function () {
            var btn = document.getElementById('checkOut');
            btn.onclick  = function() { clearCart() };
        })
    });

I'm guessing that for security reasons. Bootstrap doesn't let for button. but we can set function as above

Complete snippet

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
  
    <button type="button" class="btn btn-primary my-popover" data-bs-toggle="popover">Click Me</button>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->

    <script>
        var popover = new bootstrap.Popover(document.querySelector('.my-popover'), {
        container: 'body',
        placement : 'auto',
        html : true,
        title : 'Your Selected Items',
        content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> <a href="javascript:void(0)" id="checkOut" class="btn btn-sm btn-success">Check Out</a> <a href="javascript:void(0)" class="btn btn-sm btn-danger">Clear Cart</a></div>'
        })
        
        document.addEventListener("DOMContentLoaded", function(event) {
            popover._element.addEventListener('shown.bs.popover', function () {
                var btn = document.getElementById('checkOut');
                btn.onclick  = function() { clearCart() };
            })
        });

      function clearCart(){
          console.log('Array cleared');
      }




    </script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions