wie man ein Bootstrap-Popover durch PHP

Question

füllen Ich weiß, dass diese Frage schon einmal gestellt wurde, ich habe die Antwort gelesen, implementiert, aber ich stehe vor einem kleinen Problem.

In der PHP-Datei versuche ich, ein Anchor-Tag zu machen und es dann im Popover anzuzeigen, aber klickbar machen, wird der gesamte Inhalt (zusammen mit dem Anchor-Tag) angezeigt. Sobald das Symbol angeklickt wird, bleibt es auch dort und verschwindet auch nicht, wenn Sie darauf klicken oder irgendwo anders auf der Seite. Hier

ist der Code:

HTML-Datei:

<li style="margin-left: 15px;"> 

    <a href="#" data-placement="bottom" title="notifications" data-poload="notification_list.php" id="id-wala"> 
    <img src="assets/ring.png" width="25" height="25" data-toggle="tooltip" data-placement="bottom" title="notifications"> 

    </a> 

    </li> 

AJAX Code

$('*[data-poload]').click(function() { 
      console.log('Hey'); 
     var e=$(this); 
     e.off('click'); 
     e.unbind('click') 
     $.get(e.data('poload'),function(d) { 
      console.log(d); 
      e.popover({content: d}).popover('show'); 
     }); 
    }); 

PHP-Datei

<?php 
      #The code for connecting to the database removed for clarity. 
      $sql1 = "SELECT PID from post where UID = '$a'"; 
      $result1 = mysqli_query($conn,$sql1); 
      $end_result = ''; 
      while($row1 = mysqli_fetch_assoc($result1)) { 
      $temp = $row1["PID"]; 
      $sql = "SELECT * from comment where status = 'unread' and PID = '$temp' "; 
      $result = mysqli_query($conn, $sql); 
      if (mysqli_num_rows($result) > 0) { 
        while($row = mysqli_fetch_assoc($result)) { 
         $end_result='<a href ="#" >'.'Notification from '.$row["UID"].'</a>'; 
         echo $end_result; 
         echo '<br/>'; 
        } 
      } 
     } 
      $conn->close(); 
    ?> 

Das Problem ist, dass die Echo end_result $ druckt <a href ="#" >Notification from 89</a> statt Mitteilung von 89 und es anklickbare machen.

Bitte geben Sie einige Vorschläge zur Behebung dieses Problems.

Answer 1

Das Problem liegt daran, dass die Eigenschaft html auf dem Popover standardmäßig false ist. Dies bedeutet, dass HTML, das Sie in den Popover-Inhalt einfügen möchten, entfernt wird. Um dieses Verhalten zu ändern, müssen Sie html: true festlegen.

Sie müssen auch trigger: 'manual' verwenden und die Option toggle verwenden, um das Popover bei aufeinanderfolgenden Klicks auszublenden. Versuchen Sie dies:

e.popover({ 
    html: true, 
    trigger: 'manual', 
    content: d 
}).popover('toggle'); 

Working example

Bootstrap Popover documentation