Kann ich dynamische Inhalte in einem Bootstrap-Popover verwenden?

Question

Ich verwende ein Bootstrap-Popover in einem 'Repeat Region', das Testimonials anzeigt. Jedes Testimonial hat einen 'Property Details anzeigen'-Button, der das Popover öffnet. Im Pop-over will ich das Bild zeigen, das mit jedem Zeugnis und den Details des Bildes verbunden ist. Der Bildpfad wird in einer Spalte in der Datenbank gespeichert, um das Bild für jedes Testimonial anzuzeigen, das ich brauche, um die Bildquelle an den Inhalt zu binden, aber es akzeptiert kein PHP. Ich verwende ein Skript, mit dem ich HTML in den Inhalt schreiben kann, aber das Bild muss dynamisch erstellt werden. Dynamischer Text funktioniert in der Option "Titel", jedoch nicht für Inhalt.

Kann jemand dieses Licht beleuchten?

Hier ist was ich habe.

<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> 

Answer 1

Hier ist der generische Ansatz, aber ASP.Net-Handler verwendet, um Bild zu verarbeiten. Verwenden Sie ähnliche Dinge in PHP Bilder

<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> 

Answer 2

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

Answer 3

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); 
     } 
    }); 
}); 

Answer 4

Ein Jahr alt :(dynamisch zu generieren, aber diese andere Person helfen kann

Ihre js Skript entfernen und hinzufügen Dieses:

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