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