Bootstrap Popover content not working

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

$('#appendTarget').append('

' + item.name +
'

' +
'

');


This is my function for triggering:

function showPopover(element) {
$(element).popover({
html: true,
content: function() {
$('#popover-content').append('Edit'
+'Activate'
+'Delete');
}
});
}


And the popover-content is this:

popover-content







But it is not working. However if I add this links directly into

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:




display:none




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

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

popover.show();

popover = popover.append('Edit'
+'Activate'
+'Delete');
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 -.-




popover.empty()















Which element/action triggers showPopover()?
– Ravi Maniyar
Jun 29 at 8:26






showPopover()








I've edited my question. It is the button with onclick="showPopover(this)"
– harunB10
Jun 29 at 8:28






onclick="showPopover(this)"








Where does your display:none property change?
– Arex
Jun 29 at 8:31










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 at 8:34






item.name








item.name is a part of JSON which I get from backend.
– harunB10
Jun 29 at 8:35






item.name







2 Answers
2







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






HTML:





<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('

Item' +
'
' +
'
Button
');

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

});








Works great. Thank you :).
– harunB10
Jun 29 at 9:43










Thanks @harunB10
– Ravi Maniyar
Jun 29 at 9:53








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.




<a>




i




i=1




i==1




i




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 at 9:21











By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.