web-dev-qa-db-fra.com

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 comporte un bouton "Afficher les détails de la propriété" qui ouvre la fenêtre. Dans le Pop over, je souhaite 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 de la base de données, ainsi, pour afficher l'image de chaque témoignage, j'ai besoin de lier la source de l'image au contenu, mais il n'accepte pas PHP. J'utilise un script qui me permet d'écrire du code HTML dans le contenu, mais l'image doit être créée de manière dynamique. Le texte dynamique fonctionne dans l'option 'a' titre ', mais pas pour le contenu.

Quelqu'un peut-il faire la lumière sur cette question?

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="#" rel="details" class="btn btn-small pull-right" data-toggle="popover"     title="<?php echo $row_rsTstmnlResults['property_name']; ?>" data-content="">View Property</a>
javascriptphpjquerytwitter-bootstrappopover
16
Steve Joiner
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
kataras

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
Othman Dahbi-Skali

Voici l'approche générique, mais utilise le gestionnaire ASP.Net pour traiter l'image. Utilisez des éléments similaires dans 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
Murali Murugesan
$("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
Karthick Kumar