CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
ssharma
ssharma

Reputation: 349

how to fill a Bootstrap popover through PHP

I know that this question has been asked before,I have read the answer,implemented it,but I am facing one small problem.

In the PHP file I am trying to make an anchor tag and then display it in the popover,but instead making it clickable,the whole content(along with the anchor tag) is displayed. Also,once the icon is clicked,it sticks around and doesn't go away even after clicking on it or anywhere else on the page.

Here is the code:

HTML file:

<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 file

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

The problem is that the echo $end_result is printing <a href ="#" >Notification from 89</a> instead of Notification from 89 and making it clickable.

Please provide some suggestions on how to fix this problem.

Upvotes: 1

Views: 1740

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

The issue is because by default the html property on the popover is false. This means any HTML you attempt to place inside the popover content will be removed. To change this behaviour you need to set html: true.

You'll also need to use trigger: 'manual' and use the toggle option to hide/show the popover on successive clicks. Try this:

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

Working example

Bootstrap Popover documentation

Upvotes: 1

Related Questions