Ich habe ein Bootstrap 3-Popover definiert, um anzuzeigen, wenn auf ein Symbol in einer Tabellenzelle geklickt wird. Die Tabellenzeilen werden beim Laden der Seite dynamisch eingefügt. Meine jQuery verwendet einen Ajax-Aufruf, um den Inhalt des Popover zu erhalten. Wenn das Popover angezeigt wird, ist sein Titel vorhanden, da sein Inhalt leer ist.Festlegen des Dateninhalts des Bootstrap-Popover funktioniert nicht

Hier ist der relevante html:

<td>1-Year Individual <a tabindex="0" class="history-info" data-trigger="focus" data-memberid="123" data-toggle="popover" data-placement="left" data-title="Membership history for Fred Smith" data-html="true" data-content=""><span class="glyphicon glyphicon-info-sign" style="color:grey;"></span></a></td>

Wie Sie sehen können, die Daten-Content-Attribut wird auf leer gesetzt.

Hier ist mein Javascript.

$("#member-table .history-info").on("show.bs.popover", function() { 
var memberid=$(this).data("memberid"); 
$.ajax({ 
    url: "memberships-GetHistoryInfo.php", 
    type: "GET", 
    data: {MemberID: memberid}, 
    datatype: "html", 
    async: false, 
    success: function (data) { 
     $(this).data("content",data); 
    } 
});

})

ich mit einem Alarm direkt nach dem $ prüft haben (this) .data ("content", Daten); Zeile, in der der Dateninhalt auf den erwarteten Wert gesetzt ist. Im Popover wird jedoch nur der Titel angezeigt.

Mitglied-Tabelle im Selektor ist die ID der fraglichen Tabelle mit Ausnahme des Titels.

Quelle

2017-07-17 Pete

Die jquery.data() API legt Daten für ein Element fest, wird jedoch von jQuery abstrahiert und befindet sich in einer Ebene über dem DOM. Ich würde in Betracht ziehen, das Attribut mit $(this).attr('data-content', data);

Quelle

2017-07-17 23:47:32 sauntimo

Dank für den Vorschlag hinzufügen, aber leider machte es keinen Unterschied. – Pete

Ah, ich ging auf die Bootstrap-Dokumentation für Popovers, griff das Element im Beispiel mit jQuery in meiner Browser-Konsole und änderte das 'data-content'-Attribut mit' attr() ', klickte auf den Button und der Inhalt hatte sich geändert Ich habe es eingestellt - vielleicht müssen Sie den Inhalt festlegen, bevor 'show.bs.popover' ausgelöst wird? Aus der Methode '.popover ('show')' unter http://getbootstrap.com/javascript/#popovers scheint der Punkt zu sein, der auf Inhalt überprüft wird. Stattdessen könnten Sie beim Laden der Seite die Daten für alle Popovers über AJAX abrufen und das Ergebnis überlappen und das Datenattribut allen Zeilen hinzufügen. – sauntimo

Ich konnte kein jQuery-Popover-Beispiel auf dem von Ihnen angegebenen Link finden, vielleicht habe ich es gerade verpasst. Ich habe ursprünglich den Dateninhalt für jedes Symbol beim Laden der Seite erstellt, aber die Leistung war aufgrund der Anzahl der Zeilen in der Tabelle und der erforderlichen db-Zugriffe nicht groß. Ich hoffe, die Leistung zu verbessern, indem ich den Dateninhalt nur dynamisch erzeuge, wenn auf ein Symbol geklickt wird. – Pete

Festlegen des Dateninhalts des Bootstrap-Popover funktioniert nicht

Mitglied-Tabelle im Selektor ist die ID der fraglichen Tabelle mit Ausnahme des Titels.

Antwort

Verwandte Themen