Can I use dynamic content in a popup popover?

Question

I use Bootstrap Popover in the "Repeat Region", which displays reviews. Each review has a button "View object properties" that opens a popover. In Pop Pop, I want to display an image associated with each recall and image details. The image path is stored in a database column, so to display the image for each evidence I need to link the image source to the content, but it does not accept PHP. I use a script that allows me to write html to the content, but the image needs to be created dynamically. Dynamic text works in the parameter 'a' tag 'title', but not for Content.

Can anyone shed some light on this?

Here is what I have.

<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

 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 2

One year: (but it can help another person

Remove the js script and add this:

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

Answer 3

Here is a general approach, but uses an ASP.Net handler to process the image. Use similar things in PHP to dynamically create images

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

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