jquery - 如何将 bootstrap popover 与此 Ajax 查询结合起来

Question

我正在尝试创建一个通知系统。当用户点击通知按钮时这将打开一个弹出窗口并检索 Ajax 中的“未读”通知

我找到了解决方案，但它确实不干净，你能帮我改进它吗？

我的按钮:

<a href="#" rel="details" class="btn btn-default navbar-btn" data-toggle="popover" title="Notifications">

我的JS:

  <script type="text/javascript">
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    $("[rel=details]").popover({ 
      placement : 'bottom', 
      html: 'true', 
      content : '',
      template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><div class="popover-footer"><a href="/notifications.php" type="button" class="btn btn-default">More</a></div></div>' 
    });

    $("[rel=details]").click(function(){
      $.ajax({
       url : '/ajax/notifications.php',
       dataType : 'html',
       success: function(data){
        $(".popover-content").append(data);
        console.log(data);
      }
    });
    });
  </script>

我的 Ajax 文件 (/ajax/notifications.php):

$stmt = $bdd->prepare('SELECT *, DATE_FORMAT(date,"%d/%m/%Y - %T") AS date from notifications where receiver = :user');
$stmt->execute(array(
  ':user' => $user
  ));

if($stmt->rowCount() > 0)
{ echo '<ul';
  while($row = $stmt->fetch()){ ?>
  <li>
    <span><?= $row['title'] ?></span>
  </li>
  <?php }
  echo '</ul>';
} 
else
{
  echo 'Error';
}

谢谢

Answer 1

您可能假设在弹出窗口显示上获取远程数据(即: show.bs.popover )，以便用远程数据填充弹出窗口容器。

但是，您可以考虑将此过程也添加到更多弹出按钮中。

一个例子:

function getRemoteData() {
    $.ajax({
        url: 'https://api.github.com/repositories?since=364',
        dataType: 'html',
        success: function (data) {
            //
            // if data contains ERROR disable the More button
            //
            // $(this).addClass('disabled');
            //
            $(".popover-content").append('<ul><li>1</li><li>2</li></ul>');
            //console.log(data);
        }
    });
}

$("[rel=details]").popover({
    placement: 'bottom',
    html: 'true',
    content: '',
    template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><div class="popover-footer"><a href="/notifications.php" type="button" class="btn btn-default">More</a></div></div>'
});

$(document).on('click', '[href="/notifications.php"]', function (e) {
    e.preventDefault();
    getRemoteData();
});

$("[rel=details]").on('show.bs.popover', function (e) {
    getRemoteData();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a href="#" rel="details" class="btn btn-default navbar-btn" data-toggle="popover" title="Notifications">Click Me</a>