Question

我已经阅读了许多有关使用AJAX结果来更新Bootstrap popover内容的问题，但似乎无法拼凑出适用于我的情况的解决方案。如果我错过了什么，我道歉。

我在模态对话框中的表单中有一系列输入框。当填写某个文本框（#tool框）并且另一个文本框（#chamber框）成为焦点时，我发送一个AJAX调用以识别该房间的适用值并希望它们显示在弹出窗口中。使用下面的代码我能够完成这个，但只在第一次尝试。之后，内容保持不变（即，不用新的房间信息替换）。请注意，我也将AJAX结果放入输入的自动完成中，并且每次都更改为新值，只是弹出窗口保持不变。

应用程序的复杂性并不适用于jFiddle，以下是适用的剪辑

HTML：

<div class="control-group">
    <label class="control-label" for="chamber">Chamber</label>
    <div class="controls">
        <input id="chamber" name="chamber" type="text" placeholder="Enter a chamber" class="input-xlarge chamberType">
        <a href="#" id="chamberPopup"><span class="glyphicon glyphicon-search"></span></a>
     </div>
</div>

分庭聚焦：

$("#chamber").focus(function() {
    var parent = $('#tool').val();
    if (parent != '') {
        $.ajax({
            type: 'POST',
            url: 'getChamberDropdown.php',
            data: {parent: parent},
            dataType: 'json',
            async: false,
            success: function (chamberResult) {
                var chamberHint;

                if(chamberResult.length > 0) {
                    chamberHint = JSON.stringify(chamberResult);
                } else {
                    chamberHint = "No chambers.";
                }
                $(function () {
                    $('.chamberType').autocomplete({
                        source: chamberResult
                    });
                });

                $('#chamberPopup').popover({
                    placement: "right",
                    html: true,
                    title: "Applicable Chambers",
                    content: chamberHint
                });
            }
        });
        $('#chamberPopup').popover('show');
    }
})

会议室失焦：

$("#chamber").focusout(function() {
    $('#chamberPopup').popover('hide');
})

任何建议或协助都将不胜感激。

Answer 1

请将您的代码调整为以下内容。由于popover没有refresh方法，因此您必须destroy并每次重新初始化。

$(function () {
    var popover = $('#chamberPopup');
    popover.popover();
    $("#chamber").focus(function() {
        popover.popover('destroy').popover({
            placement: "right",
            html: true,
            title: "Applicable Chambers",
            content: 'Loading ..... ... '
        });
        var parent = $('#tool').val();
        if (parent != '') {
            $.ajax({
                type: 'POST',
                url: 'getChamberDropdown.php',
                data: {parent: parent},
                dataType: 'json',
                async: false,
                success: function (chamberResult) {
                    var chamberHint;

                    if(chamberResult.length > 0) {
                        chamberHint = JSON.stringify(chamberResult);
                    } else {
                        chamberHint = "No chambers.";
                    }
                    $('.chamberType').autocomplete({
                        source: chamberResult
                    });

                    popover.popover('destroy').popover({
                        placement: "right",
                        html: true,
                        title: "Applicable Chambers",
                        content: chamberHint
                    })
                    .popover('show');
                }
            });
        }
    });
});

使用AJAX结果动态更新Bootstrap Popover

1 个答案: