We Keep Coding

Button in bootstrap popover loses attributes

I have a bootstrap popover for my django website that opens when a button is clicked. Inside this popover is another button. I am currently doing this by putting HTML in the 'data-content' of the popover, seen below:
<a tabindex="0" id="{{prod.title}}" value="{{prod.id}}" type="button"
class="btn btn-secondary btn-light mt-3 mb-0"
data-toggle="popover"data-trigger="focus" data-html="true" data-content="
<div class='btn-group-vertical'>
<a type='button' data-show-value='{{prod.id}}' id='{{prod.id}}'
class='btn btn-secondary btn-pop wish'>Add to Wishlist</a>
</div>"
>More Options</a>
I need to get the 'data-show-value' in jQuery, and I am currently using the following which triggers when this button is clicked:
$(document).on('click', '.wish', function () {
var thisButton = $(this)[0]
console.log(thisButton);
var prodID = $(this).data("show-value");
}
However, all this does is return 'undefined'.
I used console.log(thisButton) to see what the button code is displaying as, and it is this:
<a id=10 class='btn btn-secondary btn-pop wish'>Add to Wishlist</a>
This explains why the 'data-show-value' is returning as undefined, as the attribute itself is not rendering on the web page.
Why is this?

.wish is a class and there may be a lot of elements that has this class you need to specify an id instead:
$(document).on('click', '.wish', function () {
var thisId = $(this).attr('id');
console.log(thisId); //check if this is the id of the element you want to trigger
var prodID = $('#'+thisId).data("show-value");
}

Using div element in data-content of Bootstrap Popover [duplicate]

I am trying to display HTML inside a bootstrap popover, but somehow it's not working. I found some answers here but it won't work for me. Please let me know if I'm doing something wrong.
<script>
$(function(){
$('[rel=popover]').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
</script>
<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title">
popover
</li>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>

You cannot use <li href="#" since it belongs to <a href="#" that's why it wasn't working, change it and it's all good.
Here is working JSFiddle which shows you how to create bootstrap popover.
Relevant parts of the code is below:
HTML:
<!--
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
class="btn btn-lg btn-primary"
role="button"
data-html="true"
data-toggle="popover"
data-trigger="focus"
title="<b>Example popover</b> - title"
data-content="<div><b>Example popover</b> - content</div>">Example popover</a>
JavaScript:
$(function(){
// Enables popover
$("[data-toggle=popover]").popover();
});
And by the way, you always need at least $("[data-toggle=popover]").popover(); to enable the popover. But in place of data-toggle="popover" you can also use id="my-popover" or class="my-popover". Just remember to enable them using e.g: $("#my-popover").popover(); in those cases.
Here is the link to the complete spec:
Bootstrap Popover
Bonus:
If for some reason you don't like or cannot read content of a popup from the data-content and title tags. You can also use e.g. hidden divs and a bit more JavaScript. Here is an example about that.

you can use attribute data-html="true":
<a href="#" id="example" rel="popover"
data-content="<div>This <b>is</b> your div content</div>"
data-html="true" data-original-title="A Title">popover</a>

Another way to specify the popover content in a reusable way is to create a new data attribute like data-popover-content and use it like this:
HTML:
<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>
JS:
$(function(){
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
This can be useful when you have a lot of html to place into your popovers.
Here is an example fiddle: http://jsfiddle.net/z824fn6b/

You need to create a popover instance that has the html option enabled (place this in your javascript file after the popover JS code):
$('.popover-with-html').popover({ html : true });

I used a pop over inside a list, Im giving an example via HTML
<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>

You only need put data-html="true" in the link popover. Is gonna work.

This is an old question, but this is another way, using jQuery to reuse the popover and to keep using the original bootstrap data attributes to make it more semantic:
The link
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
Show it!
</a>
Custom content to show
<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
<ul class="nav nav-pills nav-stacked">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
Javascript
$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
});
Fiddle with complete example:
http://jsfiddle.net/tomsarduy/262w45L5/

This is a slight modification on Jack's excellent answer.
The following makes sure simple popovers, without HTML content, remain unaffected.
JavaScript:
$(function(){
$('[data-toggle=popover]:not([data-popover-content])').popover();
$('[data-toggle=popover][data-popover-content]').popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});

On the latest version of bootstrap 4.6, you might also need to use sanitize:false for adding complex html.
$('.popover-with-html').popover({ html : true, sanitize : false })

I really hate to put long HTML inside of the attribute, here is my solution, clear and simple (replace ? with whatever you want):
<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
<h2>Some title</h2>
Some text
</a>
then
var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});

You can change the 'template/popover/popover.html' in file 'ui-bootstrap-tpls-0.11.0.js'
Write: "bind-html-unsafe" instead of "ng-bind"
It will show all popover with html.
*its unsafe html. Use only if you trust the html.

For Bootstrap >= 5.2
To enable HTML content in Popovers: data-bs-html="true"
Example:
<a href="#"
data-bs-toggle="popover"
data-bs-title="A Title"
data-bs-html="true"
data-bs-content="This is <strong>bold</strong>">popover</a>
Doc: https://getbootstrap.com/docs/5.3/components/popovers/#options

You can use the popover event, and control the width by attribute 'data-width'
$('[data-toggle="popover-huongdan"]').popover({ html: true });
$('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () {
var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width"));
$("div[id^=popover]").css("max-width", width);
});
<a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code">
<i class="far fa-question-circle"></i>
</a>

Actually if you're using Bootstrap5 with Django then their method of passing in content as a string is perfect and in line with Django's template inclusion. You can create a template file with whatever partial HTML that you need, so for example, there is not X-editable for Bootstrap5 that seems to work, so maybe you'd want to make a line edit together with Ok|Cancel buttons as content. Anyway, this is what I mean:
<button data-bs-content="{% include './popover_content.html' %}" type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" >
Click to toggle popover
</button>
Where my settings.py templates section looks like this:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'],
'APP_DIRS': True, # True is necessary for django-bootstrap5 to work!
'OPTIONS': {
'debug': True,
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
I keep my templates (of every single app) in a <project dir>/templates/<app name> folder. I have MyMainApp/popover_content.html right beside MyMainApp/home.html wher the above example code was tested. But if you keep your templates in each app's Django folder, then you'll need to add "MyApp/templates" to the TEMPLATES[0]{'DIRS': ['MyApp/templates', 'MyApp2/templates']} list.
So at least this will give you the ability to put your popover HTML in the usual, syntax-highlighted Django template format, and makes good use of modularizaton of your Django template into components.
I'm personally going to use it to make an editable label (title and description fields of some data in my app).
One drawback is that if you use doublequotes (") when including: "{% include './popover_content.html' %}", then you must use single quotes all throughout the popover_content.html` template.
You also need to enable html for popovers, so your site-wide popover initializer would go:
<script type="text/javascript">
$(document).ready(() => {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(
function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
html: true,
});
});
});
</script>
Here is the (unstyled) result. In conclusion, use the default-provided string method of passing in, and pass in an included Django template file. Problem solved!

How to attach jQuery pop-up event to dynamically created HTML List

Aspiring developer and first time posting a question to StackOverflow.
Researched the topic but couldn't find an exact answer to my question.
Background:
Modifying this static shopping cart, to accept dynamically created list item.
https://tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3
Trying to insert a new item to the shopping cart via span tag, span tag information will be dynamically provided by another function.
For testing purpose I'm using a button to insert the new item to the shopping list.
The shopping cart has popover event to "Modify / Delete" individual items lists
Question: I can't figure out the exact JavaScript / jQuery command to attach the popover event. All static items in the list have the popover event automatically attached but the dynamically created items do not.
I tried using the addEventListener(); but the jQuery doesn't get attached properly.
My initial assumption was if the dynamically created list items had the same "class" as the static items that the popoever event would be automatically applied to them as well.
Tried these solutions but didn't work out for me, the popover event doesn't get attached properly.
a. Event binding on dynamically created elements?
Event binding on dynamically created elements?
b. Attach event to dynamically created chosen select using jQuery
Attach event to dynamically created chosen select using jQuery
c. Attaching events after DOM manipulation using JQuery ajax
Attaching events after DOM manipulation using JQuery ajax
Here's the HTML and JavaScript:
var qrcodelist = document.getElementById('qrdemo_list');
function myFunction() {
// HTML for testing when device is not connected: comment out when device is connected
var x = document.getElementsByClassName("decode-value-offline")[0].innerHTML;
// Qty and Price text values
var qty_text = 1;
var price_text = '$150';
// Create li
var entry_li = document.createElement('li');
entry_li.setAttribute("class", "row");
// Create quantity span
var qty_span = document.createElement('span');
qty_span.setAttribute("class", "quantity");
qty_span.appendChild(document.createTextNode(qty_text));
// Create price span
var price_span = document.createElement('span');
price_span.setAttribute("class", "price");
price_span.appendChild(document.createTextNode(price_text));
// Create pop btn span
var popbtn_span = document.createElement('span');
popbtn_span.setAttribute("class", "popbtn");
popbtn_span.setAttribute("data-original-title", "");
popbtn_span.setAttribute("title", "");
//popbtn_span.addEventListener( );
// Create a tag inside pop btn
var popbtn_a_span = document.createElement('a');
popbtn_a_span.setAttribute("class", "arrow");
popbtn_span.appendChild(popbtn_a_span);
// Create item span and text node
var item_span = document.createElement('span');
item_span.setAttribute("class", "itemName");
// Append span to li
entry_li.appendChild(qty_span);
entry_li.appendChild(item_span);
entry_li.appendChild(popbtn_span);
entry_li.appendChild(price_span);
// Create text node and insert qr-code result to li span
item_span.appendChild(document.createTextNode(x));
// Get list node and insert
var list_node = document.getElementById("qrdemo_list").lastChild;
// alert(list_node);
qrdemo_list.insertBefore(entry_li, qrdemo_list.childNodes[3]);
// Write x to console log
console.log(x);
}
// Popover JavaScript
$(function() {
var pop = $('.popbtn');
var row = $('.row:not(:first):not(:last)');
pop.popover({
trigger: 'manual',
html: true,
container: 'body',
placement: 'bottom',
animation: false,
content: function() {
return $('#popover').html();
}
});
pop.on('click', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
$(window).on('resize', function() {
pop.popover('hide');
});
row.on('touchend', function(e) {
$(this).find('.popbtn').popover('toggle');
row.not(this).find('.popbtn').popover('hide');
return false;
});
});
<!-- Shopping Cart List HTML -->
<div class="col-md-7 col-sm-12 text-left">
<ul id="qrdemo_list">
<li class="row list-inline columnCaptions">
<span>QTY</span>
<span>ITEM</span>
<span>Price</span>
</li>
<li class="row">
<span class="quantity">1</span>
<span class="itemName">Birthday Cake</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$49.95</span>
</li>
<li class="row">
<span class="quantity">50</span>
<span class="itemName">Party Cups</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$5.00</span>
</li>
<li class="row">
<span class="quantity">20</span>
<span class="itemName">Beer kegs</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$919.99</span>
</li>
<li class="row">
<span class="quantity">18</span>
<span class="itemName">Pound of beef</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$269.45</span>
</li>
<li class="row">
<span class="quantity">1</span>
<span class="itemName">Bullet-proof vest</span>
<span class="popbtn" data-parent="#asd" data-toggle="collapse" data-target="#demo"><a class="arrow"></a></span>
<span class="price">$450.00</span>
</li>
<li class="row totals">
<span class="itemName">Total:</span>
<span class="price">$1694.43</span>
<span class="order"> <a class="text-center">ORDER</a></span>
</li>
<li class="row">
<!-- QR Code Images -->
<span class="itemName"><img src="img/AppleQRCode.png" width="100" height="100"></span>
<span class="price"><img src="img/OrangeQRCode.png" width="100" height="100"></span>
</li>
<li class="row">
<!-- device offline testing span -->
<span class="decode-value-offline">Unknown</span>
</li>
<li class="row totals">
<!-- Button to insert qr-code result to list -->
<span class="order"><a class="text-center" onclick="myFunction()">Insert</a></span>
<span class="itemName">Insert QR Code Result</span>
</li>
</ul>
</div>
<!-- Popover HTML -->
<!-- The popover content -->
<div id="popover" style="display: none">
<span class="glyphicon glyphicon-pencil"></span>
<span class="glyphicon glyphicon-remove"></span>
</div>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/customjs.js"></script>
Appreciate the great support in advance and please contact me if additional information is needed for clarification.

JSFiddle of Fix: https://jsfiddle.net/0phz61w7/
The issue is that you need to delegate the event. Please do the following:
Change:
pop.on('click', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
To:
$(document).on('click', '.popbtn', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
Also, you need to remove the } from line 54, just after console.log(x);. That is throwing an error.
The above modification works, but in the code provided, .popbtn is not visible because the node is empty. So in the jsfiddle provided, I added a CSS rule to include the text POPBTN. Click that and an alert I added to the click event fires.

You need to delegate jquery function to the HTML elements created dynamically like this:
Change your following line
var pop = $('.popbtn');
var row = $('.row:not(:first):not(:last)');
like given here:
var pop = $(document).find('.popbtn');
var row = $(document).find('.row:not(:first):not(:last)');

How to set id for bootstrap tabs in javascript

I am generating tabs and the tab content dynamically using json format.
Here is the code that is generated after passing the json data:
<ul class="nav-tabs>
<li class = "active">
<span class="icon icon-untitled"></span> DEMO
</li>
</ul>
How to set the id of active tab to the below save button which is located under respective tabs.
<div class="tab-content">
<button id="" name="demo_save" type="button" class="btn">
<span class="icon-floppy"></span> Save
</button>
</div>
So, whenever a tab is active the save button under the respective active button will get the id of that tab.
How can I implement this???

Code below should work (if I correctly understood You)
$('li').on('click', function(){
var id = $(this).find('a').data('tab-id');
$('button').attr('id', id);
})
But You can get tab id when You click the button:
$('button').on('click', function(){
var id = $('li.active').find('a').data('tab-id');
$(this).attr('id', id);
})

If you generate your tab dynamically by javascript, you can add the event listener to the generated tabs by using following code:
$(document).on('click', 'ul.nav-tabs li', function() {
var id = $(this).find('a').data('tab-id'); // get respective tab-content's id of the tab
$('#'+id+'.tab-content button').attr('id', id); // set the id of button in given tab-content
});

How can I use "div" in Twitter's Popover with multiple buttons?

This solution is ok for one button cases: Is it possible to use a div as content for Twitter's Popover
But in my page I have a bunch of popovers (say 50-100).
So I need to modify this solution.
This wa #jävi's solution:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
Each of my button has its own id.
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div1" style="display: none">
<div>This is your div content</div>
</div>
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div2" style="display: none">
<div>This is your div content</div>
</div>
So how can I rewrite this javascript code snippet to cover all my buttons?

Just fought with this myself. You need to put the id in the element that triggers the popover. Use a custom data attribute like so (called 'data-id'):
<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a>
Then you can modify your javascript slightly to grab the data-id attribute value programmatically:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $($(this).attr('data-id')).html();
}
});
});

If you don't want to pollute your source element with another data-* attribute, here is a simple and generic way to use the data-content attribute as text or CSS selector:
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
var content = $(this).data('content');
try { content = $(content).html() } catch(e) {/* Ignore */}
return content;
}
});
You can now use the data-content attribute with a text value:
<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-large" href="#">Click to toggle popover</a>
...or use the data-content attribute with a CSS selector value:
<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-large" href="#">Click to toggle popover</a>
<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div>
You can test this solution here: http://jsfiddle.net/almeidap/eX2qd/
...or here, if you are using Bootstrap 3.0: http://jsfiddle.net/almeidap/UvEQd/ (note the data-content-target attribute name!)

You can do it without additional button attributes like this:
http://jsfiddle.net/isherwood/E5Ly5/
.popper-content {
display: none;
}
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My first popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My second popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My third popover content goes here.</div>
$('.popper').popover({
container: 'body',
html: true,
content: function () {
return $(this).next('.pop-content').html();
}
});

Store the id of the div containing the popover html inside the rel attribute of the a element
<a rel="popover_div2" ... >click</a>
And then get the rel of the click anchor inside your click listener (not sure how the popover method stores it, but I'm sure it does):
var myRel = $(this).attr(rel);
return $(myRel).html();

For me it has do be
data-id="#popover_div1"
in the HTML for the button (with a # for addressing the id of the div).