Puis-je utiliser du contenu dynamique dans un Popover Bootstrap?

Je suis à l'aide d'un Bootstrap Liste dans une "Région de Répétition" qui affiche des Témoignages. Chacun des témoignages a une "Afficher les Détails de la Propriété' le bouton qui ouvre la liste. Dans le menu plus je suis désireux d'afficher l'image associée à chaque témoignage et les détails de l'image. Le chemin de l'image est stockée dans une colonne dans la base de données afin d'afficher l'image pour chaque témoignage j'ai besoin de lier la source de l'image pour le contenu, mais il n'accepte pas le PHP. Je suis à l'aide d'un script qui me permet d'écrire du code html dans le contenu, mais l'image doit être créé dynamiquement. Texte dynamique travaille dans le " un "de la balise "title" option, mais pas pour le Contenu.

Quelqu'un peut-il éclairer sur ce point?

Voici ce que j'ai.

<script type="text/javascript">
 $(document).ready(function() {
  $("[rel=details]").popover({
  placement : 'bottom', //placement of the popover. also can use top, bottom, left or     right
  html: 'true', //needed to show html of course
  content : '<div id="popOverBox"><img src="<?php echo $row_rsTstmnlResults['image']; ?>"        width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>
    <a href="#"  class="btn btn-small pull-right" data-toggle="popover"     title="<?php echo $row_rsTstmnlResults['property_name']; ?>" data-content="">View Property</a>

source d'informationauteur Steve Joiner

  1. 16
    var popover = $("[rel=details]").popover({
    trigger: 'hover',
    placement: 'bottom',
    html: 'true'
}).on('show.bs.popover', function () {
    //I saw an answer here  with 'show.bs.modal' it is wrong, this is the correct, 
    //also you can use   'shown.bs.popover to take actions AFTER the popover shown in screen.
    $.ajax({
        url: 'data.php',
        success: function (html) {
            popover.attr('data-content', html);
        }
    });
});
  2. 4

    D'un an 🙁 mais cela peut aider une autre personne

    Supprimer votre js script et Ajouter Ceci :

    var content = $('[id*="yourDivId"]');
var title = "Your title, you can use a selector...";

$('[data-toggle="popover"]').popover({
    html: true,
    content: function () {
        return content.html();
    },
    title: function() {
      return title.html();
    }
});
  3. 2

    Ici est l'approche générique, mais utilise ASP.Net gestionnaire de processus de l'image. Utilisez les mêmes choses en PHP pour générer des images dynamiquement

    <script type="text/javascript">
 $(document).ready(function() {
  $("[rel=details]").popover({
  placement : 'bottom', //placement of the popover. also can use top, bottom, left or     right
  html: 'true', //needed to show html of course
  content : getPopoverContent(this)//hope this should be link
});
});

function getPopoverContent(this)
{
 return '<div id="popOverBox"><img src="/getImage.php?id="'+this.data("image-id")+' 
 width="251" height="201" /></div>'
}
</script>

<a href="#" rel="details" class="btn btn-small pull-right" 
data-toggle="popover"     data-image-id="5" data-content="">View Property</a>
  4. 0
    $("selector").popover({
        trigger : "manual",
        placement : 'right',
        html : true,
        template : '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
    }).popover("show");

    $.ajax({
        async : true,
        url : url,
        dataType : 'json',
        success : function(d) {
            $("#phover" + id).attr('data-original-title', d['heading']);
            $('.popover-title').html(d['heading']);
            $('.popover-content').html(d['body']);
        },
        beforeSend : function() {
            var loadingimage = '<div align="center"><img src="assets/pre-loader/Whirlpool.gif"></div>';
            $('.popover-title').html(loadingimage);
            $('.popover-content').html(loadingimage);
        }
    });