Comment modifier le contenu d'un bootstrap liste qui a déjà été affiché?

J'ai un formulaire avec un mot de passe entré deux fois. J'ai vérifier le mot de passe de la complexité et de la cohérence et afficher les messages d'erreur dans une fenêtre pop-over connectée à l'ENTRÉE de champ:

<a href="#" id="aIdPwd2" data-toggle="manual" data-content="The password entered does not match the one previously entered" data-placement="right" href="#" rel="popover">
<input type="password" id="iIdPwd2" class="fmt1" size="60" value=""/>
</a>

Avec ce code:

$("#aIdPwd2").popover({content: msg});

Vous pouvez choisir dynamicaly le message qui sera affiché. Mais une fois qu'il a été affichée une fois, il sera alors toujours le même.

J'ai lu de nombreux articles sur ce sujet populaire, et n'a pas essayé beaucoup de choses (joindre 2 liste à la même entrée, changer l'intérieur de html dans la getElementsByClassName("liste-contenu"), de le détruire et recréer la liste, ..), mais sans succès jusqu'à présent.

Une solution sur la façon de modifier le contenu d'un bootstrap liste qui a déjà été affiché ou tout type de travail serait très appréciée.

OriginalL'auteur Pr Shadoko | 2013-08-10

  1. 4
    document.getElementsByClassName("popover-content")[0].innerHTML = 'something else';

    sûr que cela ne fonctionne pas?

    essayé sur cette page et il fonctionne comme prévu.

    Mise à JOUR: il ne fonctionne que si la liste est visible parce que l'élément est recréé/détruit à chaque passage de la souris/de l'événement mouseout

    je suppose que ce n'est pas la meilleure solution, mais vous pouvez le faire:

    var msg = 'ben123 is not a goddamn password!';

document.getElementById('password').addEventListener('mouseover', function() {  
    document.getElementsByClassName("popover-content")[0].innerHTML = msg; 
});

    et changement msg quand vous en avez besoin

    J'ai fait quelques tests avec cette solution et a trouvé un peu interressant choses: 1) Vous avez besoin de faire le $("#exemple").liste('show'); avant de mettre quoi que ce soit dans le document.getElementsByClassName("liste-contenu")[0].innerHTML ou si l'élément n'existe pas, ce qui va causer une erreur. 2) Si vous déclenchez le code javascript pour afficher/set de la touche, alors vous souffrez de certaines délicat d'effets secondaires, le popver masqué automatiquement en dépit de la data-toggle="manuel", ce qui provoque une erreur et jouer toute la chaîne des événements. Si vous pouvez traiter avec ces 2 limites, alors il fonctionne.
    Pouvez-vous partager votre code de test, afin que je puisse vérifier si je n'ai pas oublié quelque chose?
    mise à jour de réponse.
    lorsque vous fermez un modal dans le bootstrap tous ses html sera supprimé de sorte que vous n'allez pas trouver quoi que ce soit par getElementsByClassName("liste-contenu") pour que les modal

    OriginalL'auteur sUP

  2. 12

    Dans Twitter Bootstrap 3, je viens de mettre à jour le contenu et ensuite appeler show. L'appel de la show s'assurer que ses redimensionnée correctement et correctement positionné.

    $(".notes").data("bs.popover").options.content="Content1";
$(".notes").popover("show");
$(".notes").data("bs.popover").options.content="Content2";
$(".notes").popover("show");

    Si vous utilisez des étiquettes de données pour afficher le contenu, alors vous aurez besoin de mettre à jour les données de tag qui prévaut. par exemple.

    $(".notes").attr("data-content","Content1");
$(".notes").popover("show");
$(".notes").attr("data-content","Content2");
$(".notes").popover("show");

    J'aime la deuxième option meilleur coz il n';t l'accès à l'intérieur en faisant data(bs.popover) mais la première des options est beaucoup plus rapide car il ne met pas à jour le dom. Afin de choisir ce qui flotte votre bateau.

    OriginalL'auteur user566245

  3. 3

    Le problème avec des solutions qui s'appuient sur popover('show') est que si vous faites cela dans un gestionnaire d'événement pour la show cas, vous allez vous retrouver avec une boucle infinie.

    Si vous voulez juste pour afficher un contenu dans votre liste lorsqu'il a déjà été démontré, vous aurez besoin de modifier directement les DOM:

    $("#aIdPwd2").next(".popover").find(".popover-content").html(msg);

    Par exemple, si vous voulez une liste qui vous permettra de charger des données à partir d'une API et d'afficher dans la liste du contenu sur le vol stationnaire:

    DOM:

    <a href="#" id="myPopover" data-toggle="popover" data-title="Details" data-api-parameter="someValue">Hover here for details</a>

    jQuery:

    $("#myPopover").popover({
    trigger: 'hover'
}).on('shown.bs.popover', function () {
    var popover = $(this);
    var contentEl = popover.next(".popover").find(".popover-content");
    //Show spinner while waiting for data to be fetched
    contentEl.html("<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>");

    var myParameter = popover.data('api-parameter');
    $.getJSON("http://api.example.com", {
        'apiParameter': myParameter
    }).done(function (data) {
        var result = data['apiReturnValue'];
        contentEl.html(result);
    }).fail(function (data) {
        result = "No info found.";
        contentEl.html(result);
    });
});

    Bien entendu, cela suppose que vous faire confiance aux données fournies par api.example.com. Si non, vous voudrez probablement pour échapper aux données retournées à atténuer les attaques XSS.

    OriginalL'auteur alexw

  4. 2

    Pour remplacer le contenu d'une liste sur un élément, appelez d'abord le détruire.
    Testé sur Bootstrap 3.1.1

    $("#aIdPwd2").popover('destroy').popover({content: msg});

    OriginalL'auteur intotecho