부트 스트랩 팝 오버 콘텐츠는 동적으로 변경할 수 없습니다.

부트 스트랩 팝 오버 콘텐츠는 동적으로 변경할 수 없습니다.

---

다음과 같이 코드를 사용합니다.

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

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

팝 오버와 콘텐츠를 올바르게 생성합니다. 팝 오버를 닫지 않고 새 데이터를 팝 오버에로드하고 싶습니다.

나는 다음을 시도했다 :

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

이 호출 후 요소의 데이터가 변경되지만 표시되는 팝 오버에서는 변경되지 않습니다.

어떻게해야합니까?

---

다음과 같이 팝 오버 인스턴스를 가져 오면 :

var popover = $('.reply').data('bs.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

---

예, 실제로 가장 쉬운 방법은 아직 제안되지 않았습니다.

여기 내 방식->

    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 :

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

---

2012 의이 답변은 Bootstrap 3 팝 오버에서 작동하지 않습니다. 이 질문 에서 작업 솔루션을 추출했습니다 .

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

---

이러한 솔루션의 대부분은 실제로 나에게 엉망인 것처럼 보입니다. 부트 스트랩 표준 문서에는 destroy사용할 수 있는 방법 이 있습니다. 따라서 일부 이벤트를 통해 콘텐츠가 변경되면 간단히 콘텐츠를 파괴 한 다음 다시 만들 수 있습니다.

.popover('destroy')

이렇게하면 팝 오버의 콘텐츠를 동적으로로드, 새로 고침 및 다시 렌더링합니다.

---

간단한 솔루션

이것으로 시도 할 수 있습니다.

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

감사.

---

내가 사용하여 문제 해결 @ 데이비드 와 @Sujay SREEDHAR 의 대답을하지만, 팝 오버로드 된 새로운 콘텐츠 동안 볼 경우, 팝 오버의 요구가 재배치 될 :

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

위치가 변경되지 않고 새 콘텐츠의 높이가 다른 경우 팝 오버가 아래쪽으로 확장되고 화살표가 대상에서 벗어납니다!

또한 나중에 버튼을 클릭하면 닫는 대신 팝 오버가 다시 열립니다. 위의 코드는 그 문제도 해결합니다.

데모 http://jsfiddle.net/whFv6/

(내 편집이 거부 되었기 때문에 여기에 게시 할 것이라고 생각했습니다 ..)

---

팝 오버가 올바르게 초기화 된 후 jquery를 직접 사용하여 class="popover-content"요소 를 바꿀 수 있습니다 .

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

---

제목을 함수로 전달할 수 있습니다.

var content = 'Loading...'

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

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

가변 내용을 동적으로 변경합니다.

---

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

This is a very clean way.

---

I wrote an async popover for bootstrap 3.1.1. I just called it popoverasync. Here is a demonstration:

async popover demo

You can download the source of the demo here:

demo source

The trick, for me, was to write the getContent method of this async popover so the user's javascript function to retrieve the content will be invoked, but getContent will return a wait animation, synchronously, back to the caller of getContent. This way, the popover has content either way. First, while the user waits, and finally when the content arrives. What I am referring to can be found within extensions.js in the demo source:

Hope this helps you!

Dan

---

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

---

When a popover is enabled, it retains its previous version(if it was created already) even if the data is change. You need to destroy the previous version to allow for the new popover to be created again. In Bootstrap 4.x do it by

.popover('dispose')

do it whenever there is a change in data through an ajax call.

참고URL : https://stackoverflow.com/questions/13564782/bootstrap-popover-content-cannot-changed-dynamically