Início / coding / Perguntas / 79197702
Accepted
GH DevOps
Asked: 2024-11-18 01:01:32 +0800 CST

Bootstrap 5 Popover-Definir conteúdo dinamicamente a partir de função assíncrona

  • 772

Estou tentando carregar um popover bootstrap 5 com conteúdo dinâmico de uma função assíncrona na qual tenho que esperar. Estou configurando meu popover assim:

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

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

                var x = await SetPopoverContent();
                return x;

            })()
        }
    });   
});

Em seguida, volto ao banco de dados e recupero meus dados dentro de 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;
}

Posso ver minha string html dentro da minha função de conteúdo popover, mas o conteúdo nunca aparece no popover. Estou fazendo algo errado com o método de retorno de chamada assíncrono?

javascript

2 respostas

  1. Best Answer

    Não funcionará com chamadas assíncronas, você precisa usar .setContento método na instância do popover ( alternativamente, você pode criar um popover após uma chamada assíncrona ou definir o conteúdo loading...e então usar.setContent ).

    Então, obtenha uma instância do popover, execute seu método assíncrono e atribua um novo conteúdo:

    // 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
    })

})()

    demonstração:

    <!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>

    veja exemplo para configuração de conteúdo: Popovers - Métodos - exemplo setContent

    O setContent método aceita um objectargumento, onde cada chave de propriedade é um stringseletor válido dentro do modelo popover, e cada valor de propriedade relacionado pode ser string| element| function| null
    • 1

  2. Acho que isso deve funcionar.

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

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

relate perguntas