Могу ли я использовать динамический контент в Popup popover?

Question

Я использую Bootstrap Popover в «Repeat Region», который отображает отзывы. В каждом отзыве есть кнопка «Просмотр свойств объекта», которая открывает popover. В Pop Pop я хочу отобразить изображение, связанное с каждым отзывом и деталями изображения. Путь изображения хранится в столбце базы данных, поэтому для отображения изображения для каждого свидетельства мне нужно связать источник изображения с контентом, но он не принимает PHP. Я использую скрипт, который позволяет мне писать html в контент, но изображение нужно создавать динамически. Динамический текст работает в опции 'a' tag 'title', но не для Content.

Может ли кто-нибудь пролить свет на это?

Вот что у меня есть.

<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

Вот общий подход, но использует обработчик ASP.Net для обработки изображения. Используйте подобные вещи в PHP для создания изображения динамически

<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

Годовалый :(но это может помочь другому человеку

Снимайте JS скрипт и добавить:

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