Содержимое 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);
});

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

Как я должен делать это?

54
jquery popover twitter-bootstrap

12 ответов

если вы захватите экземпляр 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

71

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

вот мой способ ->

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

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

редактировать

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

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

65

в bootstrap 3:

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

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

.popover('destroy')

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

9

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

$("#popover").attr ('data-content','новый контент');

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 будет расширяться вниз, и Стрелка будет вне цели!

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

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

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

3

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

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

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

спасибо.

3

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

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

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

var content = 'Loading...'

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

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

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

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

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

1

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

async popover demo

вы можете скачать исходный демо здесь:

демо источник

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

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

Дэн

0

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();
});
0