I am having a simple popover with a dynamic canvas(snippet below):
$('[data-toggle="popover"]').popover({
html: true,
content: '<canvas id="myChart" width="400" height="400"></canvas>',
}).on('shown.bs.popover', function() {
const ctx = document.getElementById("myChart")
alert(ctx.id)
I don't seem to be able to get the myChart element, getElementById returns a null object. I am assuming this has to do with the fact that the canvas element is not inserted into the DOM yet, but since I have little knowledge about Javascript, I am not sure how to fix that issue in order to be able to get the canvas object and display a chart on it.
Any suggestions?
I discovered what was needed to make it work, so unexpected. I needed to turn off auto sanitize with:
$('[data-toggle="popover"]').popover({
html: true,
content: '<canvas id="myChart" width="400" height="400"></canvas>',
sanitize: false
}).on('shown.bs.popover', function() {