Develop Reference

Bootstrap 3.4.1 sanitizer: allow progress-bar inside a popover

Bootstrap 3.4.1 and 4.3.1 now comes with a sanitizer to perform XSS prevention.
I'm trying to allow all the necessary attributes to render a progress bar inside the popover of an AdminLTE based on bootstrap 3.4.1.
With .popover({sanitize: false}); everything works as expected:
With a custom sanitizer whitelist, as specified on the bootstrap docs, the progress bar is't displayed:
This is the custom whitelist:
var myDefaultWhiteList = $.fn.popover.Constructor.DEFAULTS.whiteList;
myDefaultWhiteList.div = ['role', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax'];
myDefaultWhiteList.span = ['class'];
myDefaultWhiteList.table = ['class'];
myDefaultWhiteList.tbody = [];
myDefaultWhiteList.tr = [];
myDefaultWhiteList.td = ['colspan'];
console.log(myDefaultWhiteList);
$(function () {
$('[data-toggle="popover"]').popover({
whiteList: myDefaultWhiteList
});
});
And this is the content of my popover:
<div class="progress progress-sm active">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="6" aria-valuemin="0"
aria-valuemax="10"
style="width: 60%">
<span class="sr-only">6/10</span>
</div>
</div>
<div class="no-padding">
<table class="table table-condensed therapy-popover-table">
<tbody>
<tr>
<td>Protocollo N°</td>
<td>837-2019PC</td>
</tr>
<tr>
<td>Codice prescrizione</td>
<td>93xxxx1</td>
</tr>
<tr>
<td>Prescrizione</td>
<td><small>IDROCHINESITERAPIA INDIVIDUALE (9xxxx1) (30')</small></td>
</tr>
<tr>
<td>Data evento lesivo</td>
<td>10/09/2019</td>
</tr>
<tr>
<td>Data prescrizione</td>
<td>10/09/2019</td>
</tr>
<tr>
<td>Priorità</td>
<td>Breve</td>
</tr>
<tr>
<td>Tipo prestazione</td>
<td>Privato</td>
</tr>
<tr>
<td colspan="2"><i class="fa fa-share-square"></i> Vai alla prescrizione</td>
</tr>
</tbody>
</table>
</div>
Does anyone experienced a problem with bootstrap sanitizer and custom whitelist?
In my, everything works (tables, colspan attributes, etc...) except the progress bar...

Shit. I forgot the style attribute.
So the right role is:
myDefaultWhiteList.div = ['style'];
because 'role', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax' are already defined in the default whitelist.

InTableControl buttons of datatable editor not working when in child tr (responsive mode)

I'm using datatable editor with inTableControl buttons. The inTableControl buttons work fine when the table is in normal status, but in combination with responsive and if the inTableControl buttons are in the child tr (when collapsed in the dropdown), the sample js is not working. There are no records to edit in the modal. Does anyone know how to adjust the js for the inTableControl buttons for them also to work when in the child tr? I tried a couple of things like .parent().prev('parent') , .closest('tr.child').prev('tr.parent'), .closest('tr').prev('tr') , .parent().prev('tr') .... but none of them work. And do I need an if for both status? How would that look like?
This works fine ...
var edit_inTable_editor_bafin = $('#bafin').on('click', 'a.editor_cog', function (e) {
e.preventDefault();
editor_bafin.edit( $(this).closest('tr'), {
title: 'Edit record',
buttons: 'Update'
} );
} );
<tr id="row_2812" class="odd selected parent" role="row">
<td>Test</td>
<td class=" datatable-link" style="">
<a class="editor_cog" title="Edit Entity" role="button" href="">
</td>
</tr>
... but when the inTableControl buttons are in child tr (dropdown of responsive):
<tr id="row_2812" class="odd selected parent" role="row">
<tr class="child">
<td class="child" colspan="15">
<ul data-dtr-index="0">
<li data-dtr-index="11">...</li>
<li data-dtr-index="12">...</li>
<li data-dtr-index="13">...</li>
<span class="dtr-title"></span>
<span class="dtr-data">
<a class="editor_cog" title="Edit Entity" role="button" href="">Edit</a>
</span>
</li>
</ul>
</td>
</tr>
...

I have a similar problem. But I solved it this way
$('#tb_sos tbody').on( 'click', 'input.aja', function () {
var tr=$(this).parents('tr');
if ($(tr).hasClass("child")){
var api = tablaSOS.tabla.row( $(this).parents('tr').prev('tr') ).data();
}else{
var api = tablaSOS.tabla.row( $(this).parents('tr') ).data();
}
console.log(api);
} );

Tablesorter bug with pagination and AJAX

I'm using JS tablesorter in my table, who is populate with AJAX using the append method;
So, when I'm in the page 1, the tablesorter works great. But when I'm in the page 2 or +, a bug appears cause its is sorting the rows of every page before that I'm in.
this is my AJAX who populate the table:
function getData(page){
totalclientes =0;
totalclientes = 0;
var url = "../getters/getAtivosPainel.php?Lojas&offset="+page;
var data = "";
$.get(url, function(response){
serverResponse = response;
console.log(response);
for(i in response.content){
data +='\
<tr>\
<td>'+response.content[i].LojaNome+'</td>\
<td>'+response.content[i].LojaBairro+'</td>\
<td>'+response.content[i].LojaTelefone1+'</td>\
<td>'+LojaStatus+'</td>\
<td>'+response.content[i].PlanoNome+'</td>\
<td>'+response.content[i].Diferenca+'</td>\
</tr>';
}
$('#corpotabela').empty();
$('#corpotabela').append(data);
$('#qtd').empty();
$('#qtd').append(response.count);
$('table').tablesorter();
var width = new Array();
$(".table-body tr:eq(0)").find('td').each(function (position){
width[position] = $(this).outerWidth();
});
$(".table-header tr").find('th').each(function (position){
$(this).css("width", width[position]+2);
});
});
}
And this one is my table
<table class="table table-bordered table-hover" id="table">
<thead style="border: 1px solid #ddd;" >
<tr style="cursor: pointer;">
<th>Nome</th>
<th>Bairro</th>
<th>Telefone</th>
<th>Status</th>
<th>Plano</th>
<th>Dias para fim do plano</th>
<th>Ações</th>
</tr>
</thead>
<tbody id="corpotabela">
</tbody>
</table>
</div>
<div style="text-align:left; margin-top: -25px;">
<nav id="navi">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<?php
$j = 0;
$k=1;
for($i =$cnt; $i > 0; $i--) {
echo '<li><a id="datas" href="javascript:getData('.$j.')">'.$k.'</a></li>';
$j = $j+30;
$k++;
}
?>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
Can you give me a help?

You should only initialize tablesorter once.
$(function(){
$('table').tablesorter();
var getData = {
// add rows here
$('table').trigger('update');
};
});
When new data is added, use $('table').trigger('update'); to signal tablesorter that the content has been changed.

table column hover load separate div

I'm having a bit of trouble figuring something simple out. I have a large datatable, and I want that when hovering any column, a specific div (and different for each column) is loaded somewhere on the page, outside the table.
How should I go about that? I'm having trouble defining columns (I'm using jquery dataTables), and then finding a way to load a different image for each column.
Here is my current code that doesn't take columns into account:
$('td').hover(function() {
var myClass = $(this).attr("class");
/* hide any previously loaded div */
$(".loaded").hide();
/* load my new div with the content I need */
$("#"+myClass).show();
});
And the HTML:
<thead>
<tr>
<th class="sp1">SP1</th>
<th class="sp2">SP2</th>
<th class="bb1">BB1</th>
<th class="br1">BR1</th>
<th class="br2">BR2</th>
<th class="br3">BR3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sp1">xxx</td>
<td class="sp2">xxx</td>
<td class="bb1">xxx</td>
<td class="br1">xxx</td>
<td class="br2">xxx</td>
<td class="br3">xxx</td>
</tr>
....
</tbody>
Thanks!

Im not sure if this is what you want, but check it out:
This code will show the name of the div you are hovering in another div.
https://jsfiddle.net/5jy071t5/4/
HTML
<ul>
<li name="first">Hoover me</li>
<li name="second">And me</li>
</ul>
<div id="output"></div>
Javascript
$( "li" ).hover(
function() {
$("#output").html($(this).attr("name"));
//you can also load an image if you like
}, function() {
$("#output").html("");
}
);

It works as charm. Maybe you were missing either id or class.
$('td').hover(function() {
var myClass = $(this).attr("class");
/* hide any previously loaded div */
$(".loaded").hide();
/* load my new div with the content I need */
$("#"+myClass).show();
});
.loaded{
display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="sp1">SP1</th>
<th class="sp2">SP2</th>
<th class="bb1">BB1</th>
<th class="br1">BR1</th>
<th class="br2">BR2</th>
<th class="br3">BR3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sp1">xxx</td>
<td class="sp2">xxx</td>
<td class="bb1">xxx</td>
<td class="br1">xxx</td>
<td class="br2">xxx</td>
<td class="br3">xxx</td>
</tr>
</tbody>
</table>
<div id="sp1" class="loaded">sp1</div>
<div id="sp2" class="loaded">sp2</div>
<div id="bb1" class="loaded">bb1</div>
<div id="br1" class="loaded">br1</div>
<div id="br2" class="loaded">br2</div>
<div id="br3" class="loaded">br3</div>

Putting table into Bootstrap popover

I have a Bootstrap popover and I'm trying to put a table into it but then it doesn't show up when I click on it. This is the first time attempting HTML inside a popover so I'm unsure how to go about doing it correctly. Thanks!
$(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();
}
});
});
<a role="button" class="btn btn-link btn-item black-text" data-toggle="popover" data-trigger="focus" data-placement="top" title="Currency Converter" data-content="Displayed rates are only for informational purposes and do not reflect on the actual rates you may be charged by the financial institution handling your transaction.
<table class='table table-condensed table-bordered'>
<tr><td>Euro</td><td>€79,123</td></tr>
<tr><td>GB Pound</td><td>£46,536</td></tr>
<tr><td>AU $</td><td>$123,456</td></tr>
</table>LLC accepts payment in US Dollars only. Rates do not include taxes, duties, shipping, insurance, or any other expenses associated with the purchase."><i class="fa fa-exchange"></i> Currency converter</a>

This worked for me:
$(function() {
$.fn.popover.Constructor.Default.whiteList.table = [];
$.fn.popover.Constructor.Default.whiteList.tr = [];
$.fn.popover.Constructor.Default.whiteList.td = [];
$.fn.popover.Constructor.Default.whiteList.div = [];
$.fn.popover.Constructor.Default.whiteList.tbody = [];
$.fn.popover.Constructor.Default.whiteList.thead = [];
$('[data-toggle="popover"]').popover({
html: true,
container: 'body'
})
})

Example : http://jsfiddle.net/z824fn6b/320/ use table in popover and toggle button
Popover Example
<div id="a1" class="hidden">
<div class="popover-heading">Title <span style="float:right;cursor:pointer;" class="fa fa-times" data-toggle="popover"></span></div>
<div class="popover-body">
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
</div>
$(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 may help:
HTML:
<div id="myPopoverContent">
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
jQuery:
$('[data-toggle=popover]').popover({
content: $('#myPopoverContent').html(),
html: true
}).click(function() {
$(this).popover('show');
});
Working jsFiddle: http://jsfiddle.net/ja3f6p4j/19/

Here is how I did it:
HTML:
<div class="span12" style="margin-top: 150px;width:100%">
<a tabindex="0" role="button" data-trigger="focus" class="btn-sm btn-info" data-placement="top" id="commentPopover"><i class="fa fa-comments" ></i> View</a>
<!-- Popover 2 hidden content -->
<div id="commentPopoverHiddenContent" style="display: none">
<div>
<table border="1" style="width:100%">
<tr>
<th width="30%">Comment date</th>
<th width="70%">Comment</th>
</tr>
<tr>
<td>12/03/2015 16:45</td>
<td>*Username - Testing1</td>
</tr>
<tr>
<td>12/03/2015 16:55</td>
<td>*Username - Testing2</td>
</tr>
<tr>
<td>12/03/2015 17:13</td>
<td>*Username - Testing3</td>
</tr>
</table>
</div>
</div>
<!-- Popover 2 hidden title -->
<div id="commentPopoverHiddenTitle" style="display: none">
Error comments
</div>
</div>
JQuery:
$(function(){
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$("#commentPopover").popover({
html : true,
content: function() {
return $('#commentPopoverHiddenContent').html();
},
title: function() {
return $('#commentPopoverHiddenTitle').html();
}
});
});
Here is a fiddle: http://jsfiddle.net/5bsykcqt/

As nothing was working well for me and the answers were old, this did the trick:
const list = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
list.map((el) => {
let opts = {
animation: false,
}
if (el.hasAttribute('data-bs-content-id')) {
opts.content = document.getElementById(el.getAttribute('data-bs-content-id')).innerHTML;
opts.html = true;
opts.sanitizeFn = function (content) {
return content
}
}
new bootstrap.Popover(el, opts);
})
As alluded to at the bottom of this page: Bootstrap 5 Documentation
You can set your own sanitize function, so if you just return what was provided, nothing is removed. Boom

With CSS3 there is a simpler solution: you can use the following display attributes to simulate a table behavior
.popover_container{
display: table;
}
.popover_row{
display: table-row;
}
.popover_column1{
display: table-cell;
text-align: left;
}
.popover_column2{
display: table-cell;
text-align: left;
}
and then build the popover content
$popover_content = "<div class='popover_container'>
<div class='popover_row'>
<div class='popover_column1'></div>
<div class='popover_column2'></div>
</div>
</div>";
and use it in your HTML
echo ('<span class="material-symbols-outlined" data-bs-html="true" data-bs-toggle="popover" data-bs-trigger="hover" title="your titile" data-bs-content="'.$popover_content.'">youricon</span>')