Before we delve into resolving the issue at hand, let's acknowledge that there are numerous articles discussing how to load an Ajax call's data into a Bootstrap 4.0 popover. However, this specific query pertains to a different aspect.
The challenge I've encountered with my popover is its unconventional placement on the page once loaded, as illustrated below:
https://i.sstatic.net/2fH1n9KM.png https://i.sstatic.net/oJGBcBeA.png
Instead of appearing above the sticky note icon, the popover displays below and extends off-screen (supposedly containing seven entries). This anomaly seems to stem from the fact that when the popover initially emerges as a view container, none of the internal data/html has been loaded yet. Subsequently, upon loading the data, the popover fails to readjust itself accordingly. A temporary workaround I discovered involves simply scrolling the page to refresh the popover.
Here's the code snippet for the sticky note button and the popover container:
<script>
$(function () {
$('[data-toggle="popover"]').on('inserted.bs.popover', function (evt) {
getViewNoteModal($(evt.target));
});
});
function getViewNoteModal(caller) {
var $caller = $(caller);
var $noteContainer = $('#editNotes');
// Utilize $caller to fetch parameters.
...
$.ajax({
// GetNoteViewer represents a C# method returning the view for #editNotes.
url: "@Url.Action("GetNoteViewer")",
method: "GET",
data: {
// parameters...
},
success: function (data) {
$noteContainer.html(data);
}
});
}
</script>
...
<i class="fas fa-2x fa-sticky-note text-info show-dialog" data-placement="top"
data-toggle="popover" data-html="true" data-trigger="click"
data-template='<div class=" popover card-primary" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-header card-header"></h3>
<div class="popover-body"></div>
</div>'
data-content="<div id='editNotes'>">
</i>
A plausible solution appears to involve explicitly disposing of the popover followed by promptly showing it using
$('[data-toggle="popover"]').popover('show');success block. However, this approach presents challenges where disposing the popover wipes out its contents or showing it without disposal triggers endless callback loops.
Close to achieving the desired outcome with the popover, all functions inside operate flawlessly and the internal view formatting aligns perfectly. The last hurdle lies in ensuring the popover materializes in the correct position initially without resorting to maneuvers for alignment adjustments.