主页 / coding / 问题 / 79197702
Accepted
GH DevOps
Asked: 2024-11-18 01:01:32 +0800 CST

Bootstrap 5 Popover-从异步函数动态设置内容

  • 772

我正在尝试从异步函数加载包含动态内容的 bootstrap 5 弹出窗口，但必须等待。我按如下方式设置弹出窗口：

document.querySelectorAll('[data-bs-toggle="popover"]').forEach(function (popover) {

    new bootstrap.Popover(popover, {
        content: function () {
            (async () => {

                var x = await SetPopoverContent();
                return x;

            })()
        }
    });   
});

然后我返回数据库并在 SetPopoverContent() 中检索我的数据：

async function SetPopoverContent(popOver) {
    
    let contentText = '';
    let data = await dotNetReference.invokeMethodAsync('GetChatToInfo', messageId);
    if (data != null && data != undefined) {
        var outerDiv = '<div></div>';
        ...
        
        contentText = outerDiv.innerHTML;
    }
    else {

        contentText = '<p>Loading</p>';
    }
    
    return contentText;
}

我可以在弹出框内容函数中看到 html 字符串，但内容从未出现在弹出框中。我的异步回调方法是否出了问题？

javascript

2 个回答

  1. Best Answer

    它不适用于异步调用，您需要.setContent在弹出窗口实例上使用方法（或者，您可以在异步调用后创建弹出窗口，或者将内容设置为 loading...然后使用.setContent）。

    因此，获取 popover 实例，然后运行异步方法，然后分配新内容：

    // assign popover instance for later use
const pop = new bootstrap.Popover(popover);

// or set 'loading' right away
//const pop = new bootstrap.Popover(popover, {
//  content: '<p>Loading</p>'
//});


(async() => {

    var x = await SetPopoverContent();

    // set new content
    pop.setContent({
        '.popover-body': x
    })

})()

    演示：

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0">



  <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover">Click to toggle popover</button>



  <script>
  
    function dbCall() {
      return new Promise(r => {
        setTimeout(() => r('new data'), 1000);
      })
    }

    async function SetPopoverContent() {

      let data = await dbCall();

      return data;
    }


    document.querySelectorAll('[data-bs-toggle="popover"]').forEach(function(popover) {

      const pop = new bootstrap.Popover(popover, {
        content: 'Loading'
      });

      (async() => {

        var x = await SetPopoverContent();

        pop.setContent({
          '.popover-body': x
        })
      })();

    });
  </script>

</body>

</html>

    参见设置内容的示例：Popovers - 方法 - setContent 示例

    该setContent 方法接受一个object参数，其中每个属性键都是string弹出框模板内的有效选择器，并且每个相关的属性值都可以是 string| element| function| null
    • 1

  2. 我认为这应该有效。

    if (data != null && data != undefined) {
    var outerDiv = '<div></div>';
    ...
    
    contentText.innerHTML = outerDiv;
}
else {

    contentText = '<p>Loading</p>';
}
    • 0

相关问题