webentwicklung-frage-antwort-db.com.de

Kann ich dynamischen Inhalt in einem Bootstrap-Popover verwenden?

Ich verwende einen Bootstrap-Popover in einem "Repeat Region", in dem Testimonials angezeigt werden. Für jedes Testimonials gibt es eine Schaltfläche "View Property Details", mit der das Popover geöffnet wird. Im Popover möchte ich das mit jedem Testimonial verknüpfte Bild und die Details des Bildes anzeigen. Der Bildpfad wird in einer Spalte in der Datenbank gespeichert, damit das Bild für jedes Testimonial angezeigt werden kann, das ich zum Binden der Bildquelle an den Inhalt benötige. PHP wird jedoch nicht akzeptiert. Ich verwende ein Skript, mit dem ich HTML in den Inhalt schreiben kann, aber das Bild muss dynamisch erstellt werden. Dynamischer Text funktioniert mit der Option 'Tag-Titel', jedoch nicht für Inhalt.

Kann jemand dies 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>
16
Steve Joiner
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);
        }
    });
});
17
kataras

Ein Jahr alt :( aber dies kann einer anderen Person helfen

Entfernen Sie Ihr js-Skript und fügen Sie Folgendes hinzu:

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

Hier ist der generische Ansatz, es wird jedoch ASP.Net-Handler zum Verarbeiten des Abbilds verwendet. Verwenden Sie ähnliche Funktionen in PHP, um Bilder dynamisch zu generieren

<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>
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);
        }
    });
0
Karthick Kumar