jQuery - Reload Bootstrap Popover Window with Load() on Click

Question

I looked around and tried many different options to get this working but somehow I cant find a solution.

I have a boostrap popover window that will load() external url.

Everything works OK when I click the popup button first time but once I close the popover, the query function will not reload on click once the window has been closed.

Ideally, the popover window will be reloaded with fresh data every time the popover is called by a click.

my button:

<a class="btn btn-default btn-sm pop-class"
                data-container="body"
                data-toggle="popover"
                data-placement="left"
                id="{{ instance.id }}"></a>

Here is my script

$('.pop-class').popover({
        html: true,
        title: function() {
            return $("#my-head").html();
        },
        content: function() {
            $('#hidden-input').val(this.id);
            var id = this.id + '#container';
            return $( "#my-content" ).load( "/mypage/"+id );
        }

    });

Update:

Scenario:

This app has an external html form that the user can load as needed. As this form is dynamic and will allow the user to also update current data the form is loaded on a fly with the instance data.

As the user can close the popover at any time and return back later, the load() function should always load new data based on the instance ID or load a empty form for new entries.

Answer 1

TOTALLY UPDATED ANSWER

If I understood you task, I offer you not to use a bootstrap (it's not that it is designed for).

There is a snippet based on JQuery Ui. (JQuery UI Dialog docs)

There is a button that opens a dialog with an <iframe> that loading some web page each time dialog opens.

If you do not need an iframe, you could load any other contents instead.

$(function () {
    
    // Setting up the dialog
    $('#dialog1').dialog({
        // Hidden for now
        autoOpen: false,
        // Title
        title: 'My External Form',
        // Width in px
        width: 790,
        // Dialog close event handler
        close: function() {
            // Looking for an iframe inside it
            $(this).find('iframe').
                // Clearing its contents
                attr('src', 'about:blank');
        }
    });

    // Looking for our dialog
    $('#dialog1').
        // Looking for JQuery UI initialized dialog (up the DOM tree)
        closest('.ui-dialog').
        // Looking for dialog title (down the DOM tree)
        find('.ui-dialog-title').
        // Prepending the title with an Font Awesome icon
        prepend('<i class="fa fa-list fa-lg grey"></i>');

    // Subscribing to the click on the button
    $('button.show-dialog').click(function () {
        // Caching the JQuery button object
        var $button = $(this);
        // Getting ID of the associated dialog from 'data-dialog' attribute
        var dialogId = $button.data('dialog');
        // If there is an ID
        if (typeof(dialogId) != 'undefined')
        {
            // Getting a JQuery UI dialog by ID
            var $dialog = $('#' + dialogId);
            // Opening the dialog
            $dialog.dialog('open');
            // Loading a content to the iframe
            $dialog.find('iframe').attr('src', 'http://apple.com');
        }
    });
});

.dialog
{
    display: none;
}

.ui-dialog-titlebar i.fa {
    margin-right: 0.75em;
}

.ui-dialog .dialog.ui-dialog-content
{
    padding: 0;
    overflow: hidden;
}

.dialog iframe
{
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">

    <div class="container">
        <button class="show-dialog" data-dialog="dialog1"><i class="fa fa-arrow-left fa-lg orange">My Button</i></button>

        <div class="dialog" id="dialog1">
            <iframe id="dialog1-frame" name="dialog1-frame" width="100%" height="100%"></iframe>
        </div>
    </div>