Properly reload and reformat a Bootstrap Popover after Loading Data with ajax

Question

Let me state first of all that there are a lot of articles out there asking about simply loading an Ajax call's data into a Bootstrap 4.0 popover; this question regards a slightly different topic.

The problem I have been having with my popover is that, after it is loaded, the element shows up in an unusual position on the page, as demonstrated below:

Rather than load above the sticky note icon, the popover appears below and proceeds to bleed off-screen (there are supposed to be seven entries inside it). The reason why seems to be because, when the popover initially appears as a view container, none of the inner data/html has been loaded yet -- and once that data does load, the popover displays it without adjusting itself. A trick I've found to adjusting the containerized view is to simply scroll the page, which essentially refreshes the popover itself.

The code for the sticky note button and popover container is as follows:

<script>
    $(function () {
        $('[data-toggle="popover"]').on('inserted.bs.popover', function (evt) {
            getViewNoteModal($(evt.target));
        });
    });
    function getViewNoteModal(caller) {
        var $caller = $(caller);
        var $noteContainer = $('#editNotes');
        // The $caller is used to retrieve parameters.
        ...
        $.ajax({
            // GetNoteViewer is a C# method that returns the view that goes into #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>

It seems the most logical thing to do would be to manually dispose of the popover and promptly show it via $('[data-toggle="popover"]').popover('show'); inside the success block of the Ajax function. The problem with this approach is that disposing the popover also removes the data inside it -- and just "showing" it without disposing it results in an endless loop of callbacks to the popover.

At this point, I am very close to getting the popover to show as it should, as all the functions inside it work perfectly and the formatting of the view inside is also formatted as intended. The only issue now is getting the popover to show up in the correct spot the first time without having to pull off any tricks to set it in the right position.

Answer 1

You're switching out the content in your AJAX callback, with

$noteContainer.html(data);

- but that is apparently not enough, to make the popover "re-adjust" itself.

The update method can be used to make it re-calculate its position, https://getbootstrap.com/docs/4.6/components/popovers/#popoverupdate:

.popover('update')
Updates the position of an element’s popover.

$('#element').popover('update')