Содержимое Bootstrap popover не может изменяться динамически

Я использую код следующим образом:

$(".reply").popover({
  content: "Loading...",
  placement: "bottom"
});

$(".reply").popover("toggle");

который правильно создает popover и его содержимое. Я хочу загрузить новые данные в popover, не закрывая popover.

Я пробовал следующее:

var thisVal = $(this);
$.ajax({
  type: "POST",
  async: false,
  url: "Getdes",
  data: { id: ID }
}).success(function(data) {
  thisVal.attr("data-content", data);
});

После этого вызова данные в элементе будут изменены, но не отображаются в раскрывающемся списке.

Как мне это сделать?

ОТВЕТЫ

Ответ 1

Если вы захватите экземпляр popover следующим образом:

var popover = $('.reply').data('bs.popover');

Затем, чтобы перерисовать popover, используйте метод .setContent():

popover.setContent();

Я узнал об источнике: https://github.com/twitter/bootstrap/blob/master/js/popover.js

Итак, в вашем примере попробуйте:

thisVal.attr('data-content',data).data('bs.popover').setContent();

Обновление

Метод setContent() также удаляет класс размещения, поэтому вы должны сделать:

var popover = thisVal.attr('data-content',data).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);

Демо: http://jsfiddle.net/44RvK

Ответ 2

Да, вы можете, на самом деле, самый простой способ еще не был предложен.

Здесь мой путь → 

    var popover = $('#example').data('bs.popover');
    popover.options.content = "YOUR NEW TEXT";

popover - это объект, если вы хотите узнать больше об этом, попробуйте сделать console.log(popover) после того, как вы определите его, чтобы узнать, как вы можете его использовать после!

ИЗМЕНИТЬ

Как и в Bootstrap 4 alpha 5, структура данных немного отличается. Вам нужно использовать popover.config.content вместо popover.options.content

Спасибо @kfriend за комментарий

Ответ 3

В бутстрапе 3:

if($el.data('bs.popover')) {
    $el.data('bs.popover').options.content = "New text";
}
$el.popover('show');

Ответ 4

Большинство из этих решений на самом деле кажутся мне взломанными. В стандартных документах Bootstrap есть метод destroy, который можно использовать. Таким образом, при изменении содержимого через какое-то событие вы можете просто уничтожить и затем воссоздать контент.

.popover('destroy')

Это правильно динамически загружает, обновляет и повторно отображает содержимое popover.

Ответ 5

Этот ответ с 2012 года не работает с Bootstrap 3 popovers. Я извлек рабочее решение из этого вопроса:

$( "# popover" ). attr ('data-content', 'new content');

Ответ 6

ПРОСТОЕ РЕШЕНИЕ

Вы можете попробовать:

//Bootstrap v3.3.7 var popoverEl = $("#popover"); popoverEl.attr("data-content", "NEW CONTENT"); popoverEl.popover("show");

Спасибо.

Ответ 7

Я решил проблему, используя @David и @Sujay sreedhar, но если popover виден во время загрузки нового содержимого, popover необходимо переместить:

var popover = thisVal.attr('data-content',data).data('popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
// if popover is visible before content has loaded
if ($(".reply").next('div.popover:visible').length){
    // reposition
    popover.show();
}

Если он не перемещается и новое содержимое имеет, например, другая высота, popover будет расширяться вниз, а стрелка будет отключена!

Кроме того, когда кнопка будет нажата, она снова откроет popover вместо закрытия. Вышеупомянутый код также решает эту проблему.

Демо http://jsfiddle.net/whFv6/

(Мое редактирование было отклонено, поэтому я подумал, что отправлю его здесь.)

Ответ 8

После того, как popover был правильно инициализирован, вы можете напрямую использовать jquery для замены элемента class="popover-content":

$(".popover-content").html('a nice new content')

Ответ 9

вы можете просто передать название как функцию

var content = 'Loading...'

function dynamicContent(){
  return content
}
$(".reply").popover({
  content: dynamicContent,
  placement: "bottom"
});

$(".reply").popover("toggle");

а затем динамически изменяйте содержимое переменной.

Ответ 10

<button data-toggle="popover" data-html="true" data-content='<div id="myPopover">content</div>'>click</button>
$('#myPopover').html('newContent')

Это очень чистый способ.

Ответ 11

Я написал async popover для начальной загрузки 3.1.1. Я просто назвал его popoverasync. Вот демонстрация:

демо-версия async popware

Вы можете скачать источник демо:

демонстрационный источник

Трюк для меня заключался в том, чтобы написать метод getContent этого асинхронного popover, чтобы пользовательская функция javascript для извлечения содержимого вызывалась, но getContent будет возвращать анимацию ожидания, синхронно, обратно к вызывающему of getContent. Таким образом, popover имеет контент в любом случае. Во-первых, пока пользователь ждет, и, наконец, при поступлении контента. То, что я имею в виду, можно найти в extensions.js в демо-источнике:

Надеюсь, это поможет вам!

Dan

Ответ 12

HTML

<a data-toggle="popover" popover-trigger="outsideClick" title="Indicadores" data-content="" data-html="true" class="Evaluar" id="alun codigo"><span><i class="fa fa-check"></i>algun nombre</span></a>

JQuery

$('a.Evaluar').on('click', function () {
    var a=$(this);//.attr('data-content', "mañana");
    $.ajax({
        url: "../IndicadorControlador?accion=BuscarPorProceso&cP=24",
        type: 'POST',
        dataType: 'json'
    })
            .done(function (response) {
                //alert("done. ");
                var ind = "";
                $(response).each(function (indice, elemento) {
                    //alert(elemento.strIdentificador);
                    //console.log('El elemento con el índice ' + indice + ' contiene ' + elemento.strIdentificador.toString());
                    ind += '<a href=#>'+elemento.strIdentificador.toString()+'</a>';
                });
              $(a).attr('data-content', ind);
            })
            .fail(function () {
                sweetAlert("ERROR!", " Algo salió mal en el controlador!", "error");
            })
            .complete(function () {
            });

    $('[data-toggle="popover"]').popover();
});

Ответ 13

$('#youcomponent').attr('data-content', 'sdsd asd');