如何通過PHP填充Bootstrap彈出窗口

我知道這個問題之前已經被問過了，我已經閱讀了答案，實現了它，但是我面臨着一個小問題。如何通過PHP填充Bootstrap彈出窗口

在PHP文件中，我試圖製作一個錨定標記，然後將其顯示在彈出窗口中，但是使其變爲可點擊的，將顯示整個內容（以及錨點標記）。另外，一旦圖標被點擊，即使點擊圖標或頁面上的任何其他位置，圖標也會一直存在並且不會消失。

下面是代碼：

HTML文件：

<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代碼

$('*[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文件

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

的問題是，回聲$ END_RESULT從89打印的<a href ="#" >Notification from 89</a>代替通知並使其點擊。

請提供一些關於如何解決此問題的建議。

來源

2016-12-02 ssharma

問題是因爲默認情況下，彈出窗口上的html屬性爲false。這意味着您嘗試放入彈出窗口內容的任何HTML都將被刪除。要更改此行爲，您需要設置html: true。

您還需要使用trigger: 'manual'並使用toggle選項來隱藏/顯示連續點擊中的彈出窗口。試試這個：

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

Working example

Bootstrap Popover documentation

來源

2016-12-02 11:26:43

非常感謝，它解決了這個問題，只是多了一個thing.How我禁用它再次點擊它？ – ssharma

我不確定你的意思 - 你想禁用什麼？ –

我的意思是如果我第二次點擊圖像，我該如何讓popover消失？ – ssharma

如何通過PHP填充Bootstrap彈出窗口

回答

相關問題