In previous articles we talked about how to build and integrate into Drupal a block for displaying our Google Plus activities (I encourage you to take a look at those posts before continuing reading). This time we shall be adding two new features. One of them allows visitors to know the number of comments for each activity. The other one is an AJAX Loader intended for visitors to know when AJAX is working.

Rewriting our jQuery code

In order to add the first of the new features our code must be able to know which activities have been commented. If there are comments to be displayed then the code must print the word Comments followed by the number of comments for that activity. Otherwise, that is, the number of comments is equal to zero, the code must do nothing. This must be done not only the first time the page is loaded but also every time the button Show more is clicked by the visitor.

jQuery.each(data.items, function(i, item) {

  var d = Date.parseRFC3339(item.published);

  var published = new Date(d);

  // If there are no comments
  if (item.object.replies.totalItems == 0) {

    my_activities += '<div class="activity">
    <span class="activity-date">' + published.toDateString() +
    '</span><p>' + item.object.content + '</p></div>';
  
  } else if (item.object.replies.totalItems > 0) {

    // If there are comments to be displayed
  
    my_activities += '<div class="activity">
    <span class="activity-date">' + published.toDateString() +
    '</span><span class="activity-comments"> - Comments: ' +
    item.object.replies.totalItems + '</span><p>' +
    item.object.content + '</p></div>';

  }

}

To add an AJAX Loader, we are going to bind either ajaxStart or ajaxStop to the animated image. Remember to insert this animated image below the code for the button and identify it as ajax-loader:

$ajax_loader.ajaxStart(function() {

  $button_more.hide();

  jQuery(this).show();
	
});
  
$ajax_loader.ajaxStop(function() {

  jQuery(this).hide();

  if ($button_more.val() != 'no more items') {

    $button_more.show();

  }

});

Now every time AJAX starts working the button is hidden and the animated image is shown. Likewise, every time AJAX stops working the animated image is hidden and the button is shown if a particular condition is true. This condition must be set in the following piece of code:

$button_more.click(function() {

  jQuery.ajax({

    url: url_activities,

    type: 'get',

    data: { token: $button_more.val() },

    dataType: 'json',

    success: function(data){

      if (data.nextPageToken) {

        $button_more.val(data.nextPageToken);

      } else {

      $button_more.val('no more items');

      }

which means that if data.nextPageToken is false, that is, it does not exist, the value of the button's value attribute must be changed to no more items. This allows our previous event handler to determine the right moment to hide the button forever.

To see the final result, please visit the home page of this site.