web-dev-qa-db-fra.com

Le contenu popover bootstrap ne peut pas être modifié dynamiquement

J'utilise le code comme suit:

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

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

qui crée le popover et son contenu correctement. Je veux charger une nouvelle donnée dans le popover sans fermer le popover.

J'ai essayé ce qui suit:

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

Après cet appel, les données de l'élément sont modifiées, mais pas dans la fenêtre popover affichée.

Comment dois-je faire cela?

jquerytwitter-bootstrappopover
57
Aravind

Si vous prenez l'instance popover comme ceci:

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

Ensuite, pour redessiner la popover, utilisez la méthode .setContent():

popover.setContent();

J'ai découvert en parcourant la source: https://github.com/Twitter/bootstrap/blob/master/js/popover.js

Alors, dans votre exemple, essayez:

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

Mettre à jour

La méthode setContent() supprime également la classe de placement. Vous devez donc:

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

Démo: http://jsfiddle.net/44RvK

74
David Hellsing

Oui, vous pouvez, en fait, le moyen le plus simple n'a pas encore été suggéré.

Voici mon chemin ->

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

popover est un objet si vous voulez en savoir plus, essayez de faire console.log (popover) après l'avoir défini pour voir comment l'utiliser après!

MODIFIER

A partir de Bootstrap 4 alpha 5, la structure des données est un peu différente. Vous devrez utiliser popover.config.content au lieu de popover.options.content

Merci à @kfriend pour le commentaire

68
Yann Chabot

Dans le bootstrap 3:

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

Cette réponse de 2012 ne fonctionne pas avec Bootstrap 3 popovers. J'ai extrait une solution de travail de cette question :

$ ("# popover"). attr ('contenu de données', 'nouveau contenu');

11
Mark L

La plupart de ces solutions me paraissent vraiment dérisoires. Les documents standard de Bootstrap ont une méthode destroy qui peut être utilisée. Ainsi, en cas de changement de contenu via un événement, vous pouvez simplement détruire puis recréer le contenu.

.popover('destroy')

Cela charge, actualise et rend à nouveau correctement et dynamiquement le contenu du popover.

9
bjm88

SOLUTION SIMPLE

Vous pouvez essayer avec ceci:

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

Merci.

4
wilfredonoyola

J'ai résolu le problème en utilisant la réponse de @David et @Sujay sreedhar , mais si le popover est visible pendant le chargement du nouveau contenu, il faut le repositionner:

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

S'il n'est pas repositionné et que le nouveau contenu a par exemple une hauteur différente, le popover augmentera vers le bas et la flèche sera hors cible!

En outre, lorsque le bouton est cliqué par la suite, il réouvrira le popover au lieu de le fermer. Le code ci-dessus résout ce problème aussi.

Démo http://jsfiddle.net/whFv6/

(Mon édition a été rejetée, alors j'ai pensé la poster ici ..)

3
mlunoe

vous pouvez simplement passer le titre en tant que fonction

var content = 'Loading...'

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

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

puis changez le contenu variable de manière dynamique.

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

C'est une manière très propre.

1
Ares

Une fois le popover correctement initialisé, vous pouvez directement utiliser jquery pour remplacer l'élément class="popover-content":

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

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

J'ai écrit un popover asynchrone pour bootstrap 3.1.1. Je viens de l'appeler popoverasync. Voici une démonstration:

démo popover async

Vous pouvez télécharger le source de la démo ici:

source de démonstration

Pour moi, le truc était d'écrire la méthode getContent de cette popover asynchrone afin que la fonction javascript de l'utilisateur permettant de récupérer le contenu soit invoquée, mais que getContent renvoie une animation d'attente, de manière synchrone, à l'appelant de getContent. De cette façon, le popover a un contenu de toute façon. Tout d'abord, pendant que l'utilisateur attend, et enfin lorsque le contenu arrive. Ce dont je parle peut être trouvé dans extensions.js dans la source de démonstration:

J'espère que cela vous aide!

Dan

0
Daniel Kemper

Lorsqu'un popover est activé, il conserve sa version précédente (s'il a déjà été créé) même si les données sont modifiées. Vous devez détruire la version précédente pour permettre au nouveau popover d'être créé à nouveau . Dans Bootstrap 4.x, faites-le en

.popover('dispose')

faites-le chaque fois qu'il y a un changement de données via un appel ajax.

0
Sreeram