在成功调用ajax之后更新引导popover的内容

Update contents of bootstrap popover afer a successful ajax call

本文关键字：popover 更新 成功 调用 ajax 之后      更新时间：2023-09-26

当我点击目标div时，我希望显示一个popover（我可能会显示一个加载标签作为内容），同时向服务器发送ajax get请求以获取数据。一旦数据回来，我想更新这个已经打开的popover。

这是我的代码：

$(document).on('click', '.row-client', function (e) {
        var id = $(this).attr('id');
        var str = id.split('-');
        var component = str[0];
        var clientId= str[1];
        $.ajax({
            url: '../Clients/Index',
            type: 'GET',
            data: { clientId: clientId },
            dataType: 'html',
            success: function (data) {
                $('.popper').popover({
                    placement: 'bottom',
                    container: 'body',
                    html: true,
                    content: data
                });
            },
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            }
        });
});

我遇到的问题是：

  1. Popover不会在第一次点击或加载数据时自动显示。我需要继续点击。数据返回并加载后，弹出窗口将在"下一次"单击时显示。为什么会这样？

  2. 有没有什么方法可以让popover保持打开状态，并在我获得数据后自动更新内容？

  3. 下一次点击弹出窗口时，我希望内容为空（现在不是）。是什么阻止了它？

对$（）.popover的调用不会使popover出现。它只向DOM元素添加popover行为。它稍后显示的是点击，这取决于您为popover配置的"触发器"。

文档准备好后，请尝试立即调用$（'.popper'）.popover（）。

要更改弹出窗口的内容，请尝试以下操作：

$('.popper').attr("data-content","new content");
$('.popper').data('bs.popover').show();
相关文章：