title: How to combine bootstrap popover with this Ajax query
body: <p>I am trying to create a system of notifications.
  When the user clicks the notification button
  This opens a popover and retrieves the "Unread" notifications in Ajax</p>
  
  <p><strong>I found a solution but it's really not clean, can you help me to improve it?</strong></p>
  
  <p>My button : </p>
  
  <pre><code>&lt;a href="#" rel="details" class="btn btn-default navbar-btn" data-toggle="popover" title="Notifications"&gt;
  </code></pre>
  
  <p>My JS :</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
      $(function () {
        $('[data-toggle="popover"]').popover()
      })
      $("[rel=details]").popover({ 
        placement : 'bottom', 
        html: 'true', 
        content : '',
        template: '&lt;div class="popover"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;div class="popover-footer"&gt;&lt;a href="/notifications.php" type="button" class="btn btn-default"&gt;More&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;' 
      });
  
      $("[rel=details]").click(function(){
        $.ajax({
         url : '/ajax/notifications.php',
         dataType : 'html',
         success: function(data){
          $(".popover-content").append(data);
          console.log(data);
        }
      });
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>My Ajax file (/ajax/notifications.php):</p>
  
  <pre><code>$stmt = $bdd-&gt;prepare('SELECT *, DATE_FORMAT(date,"%d/%m/%Y - %T") AS date from notifications where receiver = :user');
  $stmt-&gt;execute(array(
    ':user' =&gt; $user
    ));
  
  if($stmt-&gt;rowCount() &gt; 0)
  { echo '&lt;ul';
    while($row = $stmt-&gt;fetch()){ ?&gt;
    &lt;li&gt;
      &lt;span&gt;&lt;?= $row['title'] ?&gt;&lt;/span&gt;
    &lt;/li&gt;
    &lt;?php }
    echo '&lt;/ul&gt;';
  } 
  else
  {
    echo 'Error';
  }
  </code></pre>
  
  <p>Thank You</p>