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

j'utilise un Popover Bootstrap dans une 'région de répétition' qui affiche des témoignages. Chaque témoignage a un bouton "Voir les détails de la propriété" qui ouvre le popover. 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é dans une colonne dans la base de données donc pour afficher l'image pour chaque témoignage je dois lier la source de l'image au contenu mais il n'accepte pas PHP. Je suis à l'aide d'un script qui me permet pour écrire html dans le contenu mais l'image doit être créée dynamiquement. Le texte dynamique fonctionne dans l'option 'a' tag 'title' mais pas pour le contenu.

quelqu'un peut-il nous éclairer là-dessus?

voilà 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="#" rel="details" class="btn btn-small pull-right" data-toggle="popover"     title="<?php echo $row_rsTstmnlResults['property_name']; ?>" data-content="">View Property</a>
16
demandé sur Steve Joiner 2014-01-30 18:23:27

4 réponses

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);
        }
    });
});
17
répondu kataras 2016-11-30 14:22:36

un an: (mais cela peut aider une autre personne

supprimez votre script js et ajoutez 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();
    }
});
4
répondu Othman Dahbi-Skali 2015-11-13 17:41:29

Voici l'approche générique, mais utilise ASP.Net handler to process image. Utiliser des choses similaires en PHP pour générer des images de manière dynamique

<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>
2
répondu Murali Murugesan 2014-01-30 14:30:32
$("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);
        }
    });
0
répondu Karthick Kumar 2014-02-21 06:13:29