Question 419596 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – change value of element attributes to that of another attribute

I want the value of attribute ‘data-bs-content’ in all elements to be set to the value found in the ‘data-my-data’ attribute when the document is loaded.

I’ve tried about a dozen different strategies that I could think of, but none seem to be working.

The reason I don’t just put the value in ‘data-bs-content’ is because there will be processing that happens on the data in ‘data-my-data’ before setting the value.

<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function() {

          var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
          var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
            var popover = new bootstrap.Popover(popoverTriggerEl, {
              container: 'body',
              trigger: 'click'
            });
            return popover;
          });

          var $element = $('[data-bs-content]');
          $element.attr( "data-bs-content" , function(index, currentValue) {
            return $(this).getAttribute('data-my-data');
          });

        });
    </script>

</head>

<body>
<br/>
<a href="#"
   data-bs-toggle="popover"
   data-bs-content="default data"
   data-my-data="my data 1"
>
    CLICK ME 1
</a>
<br/>
<br/>
<a href="#"
   data-bs-toggle="popover"
   data-bs-content="default data"
   data-my-data="my data 2"
>
    CLICK ME 2
</a>

</body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks guys.

    I have no idea why, but Xavier's suggestion was giving me:

    jquery.min.js:2 jQuery.Deferred exception: t.toLowerCase is not a function TypeError: t.toLowerCase is not a function

    Rory's tip and suggestion worked perfectly. Fixing how I was accessing the attribute value and setting the values before initializing the popover did the trick.

        <script>
        $(document).ready(function() {

          var $element = $('[data-bs-content]');
          $element.attr( "data-bs-content" , function(index, currentValue) {
            return $(this).attr('data-my-data');
          });

          var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
          var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
            var popover = new bootstrap.Popover(popoverTriggerEl, {
              container: 'body',
              trigger: 'click'
            });
            return popover;
          });

        });
    </script>

  2. 0

    Try:

    //loop through elements with existing data-my-data attribute
$('[data-my-data]').attr(function(){
    var current = $(this);
    current.attr('data-bs-content', current.attr('data-my-data'));
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search