Dynamically change content of a Bootstrap 4 popover using Ajax

Question

I want to set the content of a Bootstrap4 popover with html from an ajax call.

There are plenty of solutions for Bootstrap 3 but am having trouble finding a solution for Bootstrap version 4.

Here is my HTML:

                <button type="button"
                        id="AlertsBellButton"
                        class="btn btn-lg btn-danger"
                        data-toggle="popover"
                        data-placement="bottom"
                        data-trigger="focus" 
                        title="Alerts"
                        data-html="true"
                        data-content="Loading...">
                    <i class="fal fa-bell"></i>
                </button>

And my Javascript:

$('#AlertsBellButton').on('show.bs.popover', function () {
    $.ajax({
        url: '/Alert/GetAlertsForBell/',
        type: 'get',
        cache: false,
        success: function (data) {

            $('#AlertsBellButton').attr('data-content', data);
        }
    });
});

Setting the data-content attribute apparently should do the trick however; the first time I click the bell, the content shows "Loading..." even after the first ajax call completes and when I click the second time, the correct data shows.

I've also tried targeting the div using jQuery in the success handler, but this didn't work as the popover isn't added to the DOM yet by Bootstrap4.

Answer 1

For anyone else who gets stuck, I added some custom html as the content with an id:

                <button type="button"
                        id="AlertsBellButton"
                        class="btn btn-lg btn-danger"
                        data-toggle="popover"
                        data-placement="right"
                        data-trigger="focus"
                        title="Alerts"
                        data-html="true"
                        data-content="<div id='AlertBellContainer'>Loading...</div>">
                    <span class="sr-only">Notifications</span>
                    <i class="fal fa-bell"></i>
                </button>

And then simply set the html of my in the success handler by targeting the custom html:

$('#AlertsBellButton').on('show.bs.popover', function (e) {
    $.ajax({
        url: '/Alert/GetAlertsForBell/',
        type: 'get',
        cache: false,
        success: function (data) {
            $('#AlertBellContainer').html(data);                            
        }
    });
});

Answer 2

Bro I'm sure I'm very late but with the latest jquery they made it possible using the attr function of jquery

check this sample:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-trigger="hover" onclick='$("#testing").attr("data-content", "test success");' id="testing" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

as you can see the initial content is changed when the button is pressed

Answer 3

Here's my solution to load dynamic content into the 'data-content' part of the popover. In Bootstrap 4 you can style it anyway you want.

The ID we use is named 'anx-content'. It is located inside the 'data-content' of the popover.

The button or link:

<a class="anx_open" data-toggle="popover" title="My Content" data-html="true" data-placement="left" data-content="<div id='anx-content'>Loading...</div>" id="anx">Show dynamic popover</a>

The ajax with it Notice the '#anx-content' as div to load the content.

$(".anx_open").click(function() {

    // YOUR DATA STUFF FIRST
    ....
    $.ajax({ 
        type: "POST",
        url: '/your_file_fetching_your_content.',
        data: dataString, 
        success : function(data) { 
            $('#anx-content').html(data);
        },
        error : function(data) { $(".error").show().html('Oops! Something went wrong! The error has been registered into our system and will be solved as soon as possible.'); } 
    });
});