Creating Dynamic Popover Content with Bootstrap 5 Using an Asynchronous Function

Question

Creating Dynamic Popover Content with Bootstrap 5 Using an Asynchronous Function

Trying to create a bootstrap 5 popover with dynamic content by using an asynchronous function has been quite a challenge. Here is how I am setting up my popover:

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

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

                var x = await PopulatePopoverContent();
                return x;

            })()
        }
    });   
});

The next step involves fetching data from the database within the function 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;
}

Although I can observe the HTML string within the popover content function, unfortunately, the content does not display in the popover itself. Could it be due to an error in the async callback method?

javascript bootstrap-5 bootstrap-popover

Answer 1

Answer №1

Async calls will not function properly in this case; it is recommended to utilize the .setContent method on the popover instance instead (as an alternative, you can either create the popover after the async call or set the content as loading... and then use .setContent).

To resolve this issue, acquire the popover instance, execute your async method, and subsequently update the content:

// define the popover instance for future reference
const pop = new bootstrap.Popover(popover);

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


(async() => {

    var x = await SetPopoverContent();

    // update the content
    pop.setContent({
        '.popover-body': x
    })

})()

Demonstration:

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf7eaf7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f7f0a110c110c">[email protected]</a>/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>

Refer to the example provided for guidance on setting content: Popovers - Methods - setContent example

The setContent method accepts an object argument, where each property-key is a valid string selector within the popover template, and each related property-value can be string | element | function | null

Answer 2

Async calls will not function properly in this case; it is recommended to utilize the .setContent method on the popover instance instead (as an alternative, you can either create the popover after the async call or set the content as loading... and then use .setContent).

To resolve this issue, acquire the popover instance, execute your async method, and subsequently update the content:

// define the popover instance for future reference
const pop = new bootstrap.Popover(popover);

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


(async() => {

    var x = await SetPopoverContent();

    // update the content
    pop.setContent({
        '.popover-body': x
    })

})()

Demonstration:

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf7eaf7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f7f0a110c110c">[email protected]</a>/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>

Refer to the example provided for guidance on setting content: Popovers - Methods - setContent example

The setContent method accepts an object argument, where each property-key is a valid string selector within the popover template, and each related property-value can be string | element | function | null

Answer 3

Answer №2

I believe this code snippet should function properly.

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

Answer 4

I believe this code snippet should function properly.

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

Creating Dynamic Popover Content with Bootstrap 5 Using an Asynchronous Function

Answer №1

Answer №2

Similar questions

Potential Asynchronous Invocation within a Condition

To dismiss a popup on a map, simply click on any area outside the map

I want to create a clickable image using Vue.js

Using useCallback with an arrow function as a prop argument

I need to show a DIV element when a specific anchor is in an active state within an HTML document

Flex dimensions causing design elements to break in React Native

Trouble with updating the view when an array is modified in ng-repeat? It seems like using $scope.$apply() may not

JavaScript file system function not functioning according to its designated purpose

Is there a way to dynamically include an attribute using VueJS?

Combining elements from a string array to create a hierarchical object in JavaScript

Using sinon to stub a scope method called during the initialization of an angular controller

Error authorizing AJAX call to Gmail API

Using PHP and AJAX to send a form

gathering information from various asynchronous functions (promises)

When checking the form action property in IE6, make sure to account for forms that have a field specifically named "action."

Could you provide an explanation for how this specific recursive JavaScript function works

The issue of white space appearing in the first option of an AngularJS dropdown in Internet Explorer 11

Issue encountered with updating canvas texture twice in A-Frame and pdf.js while operating in virtual reality mode

Creating custom ExpectedConditions with Protractor for detecting attribute changes

Issue with AJAX response in Laravel 4