CODEWITHSUNDEEP
jqueryajaxtwitter-bootstrap
Rocstar
Rocstar

Reputation: 1477

How to combine bootstrap popover with this Ajax query

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

I found a solution but it's really not clean, can you help me to improve it?

My button : 

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

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

My Ajax file (/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';
}

Thank You

Upvotes: 2

Views: 2178

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

You may assume to get remote data on popover show (i.e.: show.bs.popover) in order to fill the popover container with the remote data.

But, you may consider to add this process also to the More popover button.

An example:

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>

Upvotes: 2

Related Questions