Динамическое изменение содержимого поповера Bootstrap 4 с помощью Ajax - PullRequest
Новая
       12

Динамическое изменение содержимого поповера Bootstrap 4 с помощью Ajax

0 голосов
/ 24 июня 2019

Я хочу установить содержимое поповера Bootstrap4 с помощью html от вызова ajax.

Существует множество решений для Bootstrap 3, но я не могу найти решение для Bootstrap версии 4.

Вот мой 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>

И мой Javascript:

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

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

Установка атрибута data-content, очевидно, должна сработать;Когда я нажимаю на звонок в первый раз, содержимое показывает «Загрузка ...» даже после завершения первого вызова ajax, а когда я нажимаю второй раз, отображаются правильные данные.

Я также пытался настроить таргетинг наdiv использует jQuery в обработчике успеха, но это не сработало, так как поповер еще не добавлен в DOM Bootstrap4.

1 Ответ

0 голосов
/ 24 июня 2019

Для всех, кто застрял, я добавил несколько пользовательских HTML в качестве содержимого с идентификатором: 

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

А затем просто установите html-код my в обработчике успеха, настроив таргетинг на html: 

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