Question

我环顾四周并尝试了许多不同的选项来实现这个目标但不知何故我找不到解决方案。

我有一个popover外部网址的load()窗口。

当我第一次点击弹出按钮时，一切正常，但是一旦我关闭弹出框，一旦窗口关闭，查询功能就不会重新加载。

理想情况下，每次popover调用popover时，click窗口都会重新加载新数据。

我的按钮：

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

这是我的剧本

$('.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 );
        }

    });

更新

情景：

此应用有一个外部html表单，用户可以根据需要加载。由于此表单是动态的，并且允许用户也更新当前数据，因此表单将随实例数据一起加载。

由于用户可以随时关闭popover并稍后返回，load()函数应始终根据实例ID加载新数据或为新文件加载空表单条目。

Answer 1

完全更新的答案

如果我理解你的任务，我建议你不要使用引导程序（不是它的设计目的）。

有一个基于JQuery Ui的片段。（JQuery UI Dialog docs）

有一个按钮可以打开一个带有<iframe>的对话框，每次对话框打开时都会加载一些网页。

如果您不需要iframe，则可以加载任何其他内容。

$(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>

jQuery - 使用Load（）重新加载Bootstrap Popover窗口点击

1 个答案: