Я использую 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> 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); } }); });
Один год: (но это может помочь другому человеку
Удалите скрипт 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(); } });
Вот общий подход, но использует обработчик 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>
$("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); } });