0

I was using Bootstrap 4 popover and suddenly got stuck with this issue. The problem is I can not select the attribute inside data-content of a popover. Here is the code:

HTML

 <a data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus' data-html='true' data-content="<div class='pop-div'><a href='#' class='text-center edit_web_ac' data-id='{$row['id']}' data-table='web_accounts'>Edit</a><br><a href='#' class='text-center del_web_ac'>Delete</a></div>">Options</a>

If you look closely, data-content attribute has two <a> tag inside it. I am using JQuery to select the attribute (data-id) of this inner <a> tag. I've tried $(this).attr('data-id'); which returns undefined. So, my question is, how to get the attribute of this <a> [To be clear, the <a> which has a class .edit_web_ac].

I've tried these solutions, But none of these fully match with my situation.

How to select Element Id inside attribute tag with jQuery?

How to select an element based on the property of an object inside a data attribute?

Any suggestion is highly appreciated.

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

 <a data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus' data-html='true' data-content="<div class='pop-div'><a href='#' class='text-center edit_web_ac' data-id='{$row['id']}' data-table='web_accounts'>Edit</a><br><a href='#' class='text-center del_web_ac'>Delete</a></div>">Options</a>


<script>
  $(document).ready(function(){
    $("[data-toggle='popover']").popover({
        delay: 100
    });

   $('body').on('click', '.edit_web_ac', function (e) { 
     e.preventDefault();
     var content = $(this).attr('data-id');
     alert(content); //returns 'undefined'
   })

  })
</script>
</body>

</html>

2 Answers 2

1

Try changing the data-content with seperate div and call the id through jquery content

<a href = '#' data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus'>Options</a>

Remove data-content from your anchor tag and place it as separate div

<div class='pop-div' style = 'display:none;'><a href='#' class='text-center edit_web_ac' data-id='{$row['id']}' data-table='web_accounts'>Edit</a><br><a href='#' class='text-center del_web_ac'>Delete</a></div>

and in the jquery add

$(function () {
            $('[data-toggle="popover"]').popover({
              toggle: 'popover',
              placement: 'right',
              title: 'Options',
              html: true,
              content: function () {
                  return $('.pop-div').html();
              },
            });
    });

Hope it works!

0

I would suggest to put the HTML content in a separate div with an ID:

<a data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus' data-html='true' data-content="YOURID">Options</a>

<div id="YOURID">
   <div class='pop-div'>
       <a href='#' class='text-center edit_web_ac' data-id='{$row['id']}' data-table='web_accounts'>Edit</a><br><a href='#' class='text-center del_web_ac'>Delete</a>
   </div>
</div>

In JavaScript / jQuery something like this:

var content = $('#YOURID .edit_web_ac').data('id);
1
  • Thank you @TYPO3 Freelancer, but this doesn't solve my problem properly. This is a popover, so if I put the HTML of data-content outside the popover it just doesn't show up on click. You see, I have two <a> inside data-content, and both of them have different functions upon clicking on them. Dec 2, 2019 at 6:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.