Bootstrap Popover content not working

Question

I have a button which triggers a popover. It is generated by another script.

$('#appendTarget').append('<div class="col-md-3" style="border: 2px solid grey; border-radius: 12px; padding: 5px; margin-bottom: 10px;">' + item.name +
    '</div>' +
    '<div class="col-md-3"><button class="btn" style="margin-bottom: 10px" onclick="showPopover(this)"><b style="color: red"><img src="Img/gear.png" style="width: 20px; height: 20px"></b></button>');

This is my function for triggering:

function showPopover(element) {
    $(element).popover({
        html: true,
        content: function() {
            $('#popover-content').append('<a href="#" class="btn btn-secondary">Edit</a>'
                                        +'<a href="#" class="btn btn-info">Activate</a>'
                                        +'<a href="#" class="btn btn-danger">Delete</a>');
        }
    });
}

And the popover-content is this:

<ul id="popover-content" class="list-group" style="display: none">
</ul>

But it is not working. However if I add this links directly into <ul> it works. But I want to add it dynamically so I can assign the id to each link (button).

Anyone? Why append is not working in this case?

EDIT

@Arex had a good point that display:none state was not changing. I changed my function and it looks like this:

function showPopover(element) {
    $(element).popover({
        html: true,
        content: function() {

            var popover =  $('#popover-content');

            popover.show();

            popover = popover.append('<a href="#" class="btn btn-secondary">Edit</a>'
                                        +'<a href="#" class="btn btn-info">Activate</a>'
                                        +'<a href="#" class="btn btn-danger">Delete</a>');
            return popover;   
        }
    });
}

And it works but very strange...

When I click first time it looks like everything is fine:

After that when I try to close that popover, it extends (doubles) the content:

And finally when I try to open it again, it shows empty popover :/

EDIT 2

I added popover.empty() and it works.. But when I open and close popover 2-3 times, it becomes empty. This starts to be annoying -.-

I've edited my question. It is the button with `onclick="showPopover(this)"` — harunB10, Jun 29 '18 at 08:28
Tried to create a fiddle from your example and it shows `item.name` as undefined. Can you please post complete HTML and jQuery code with static values? So that we can help further. — Ravi Maniyar, Jun 29 '18 at 08:34
@Arex i totally forgot about that. Thx. But now it appends the list on my page, not in the popover box :/. — harunB10, Jun 29 '18 at 08:41
@harunB10 I have provided the code for the function try that. Include display:block wherever required — Arex, Jun 29 '18 at 08:43
Technically, if you want to add some links into `UL` tags, then try wrapping them up in `LI`. — Ravi Maniyar, Jun 29 '18 at 08:51
No, @Arex - the contents inside UL must be wrapped in LI. See: https://stackoverflow.com/questions/6056142/is-anything-except-lis-allowed-in-a-ul#6056168 — Ravi Maniyar, Jun 29 '18 at 09:05
@RaviManiyar Try running this in fiddle:
List item 1 List item 2 List item 3
. It is not 'valid' but it will work. — Arex, Jun 29 '18 at 09:12
It will definitely work but its totally against W3C standard. — Ravi Maniyar, Jun 29 '18 at 09:14

score 2 · Accepted Answer · answered Jun 29 '18 at 09:29

I have created this fiddle for you. This should help you.

HTML:

<div id="appendTarget"></div>

<ul id="popover-content" class="list-group" style="display: none">
</ul>

jQuery:

var isMyPopoverShown = false;

function myPop(element) {
  if(isMyPopoverShown === false) {
    $(element).popover({
        html: true,
        content: function() {
            $('#popover-content').html('<li><a href="#" class="btn btn-secondary">Edit</a></li>'
            +'<li><a href="#" class="btn btn-info">Activate</a></li>'
            +'<li><a href="#" class="btn btn-danger">Delete</a></li>');
            return $('#popover-content').html();
        }
    });
  }  
  $(element).popover('toggle');
}

jQuery(document).ready(function() {
   $('#appendTarget').append('<div class="col-md-3" style="border: 2px solid grey; border-radius: 12px; padding: 5px; margin-bottom: 10px;">Item' + 
    '</div>' +
    '<div class="col-md-3"><button class="btn" style="margin-bottom: 10px" onclick="myPop(this);" data-trigger="manual"><b style="color: red">Button</b></button></div>');

  $(".btn").on('shown.bs.popover',function(){
    isMyPopoverShown = true;
  });

});

Arex · Answer 2 · 2018-06-29T09:39:52.723

Basically you are keeping on appending more and more <a> to the popover on every click. Do this instead: Create a variable i and initialise it as i=1(Do this outside the onclick triggered function or it will keep on re-initialising to 1 ). Inside your function check if i==1 if it is true use your current code and increment it by 1. else if check i is divisible by 2 -> if it is true hide it, else -> show it.

        function showPopover(element) {
            if(i==1){
            $(element).popover({
                html: true,
                content: function() {

                    var popover =  $('#popover-content');

                    popover.show();i=i+1;

                    popover = popover.append('<a href="#" class="btn btn-secondary">Edit</a>'
                                                +'<a href="#" class="btn btn-info">Activate</a>'
                                                +'<a href="#" class="btn btn-danger">Delete</a>');
                    return popover;   
                }
            });
          }
        else if(i%2==0)
    {
       $(element).popover({
            html: true,
            content: function() {

                var popover =  $('#popover-content');

                popover.hide();i=i+1;


                return popover;   
            }
        });
    }
   else{
        $(element).popover({
        html: true,
        content: function() {

            var popover =  $('#popover-content');

            popover.show();i=i+1;


            return popover;   
        }
    });}
        }

This function is not working. I edited my questiion with screenshots. — harunB10, Jun 29 '18 at 09:21

Bootstrap Popover content not working

2 Answers2