user3438096 user3438096 - 3 months ago 17
jQuery Question

How to replace the whole item inside the id div using Pusher php and javascript

I want to replace the whole item inside the id div instead of adding it.I am not familliar with javascript/ajax/jquery and i dont know which file i will edit.
This is the sample code given by pusher.com in activity-stream tutorial

$(function() {
var pusher = new Pusher('pusher key');
var channel = pusher.subscribe('site-activity');
var streamer = new PusherActivityStreamer(channel, '#replace_item');
});


html id that will replace all item inside the div

<div id="replace_item">ITEMS</div>


This is the javascript function

function PusherActivityStreamer(activityChannel, ulSelector, options) {
var self = this;

this._email = null;

options = options || {};
this.settings = $.extend({
maxItems: 10
}, options);

this._activityChannel = activityChannel;
this._activityList = $(ulSelector);

this._activityChannel.bind('activity', function(activity) {
self._handleActivity.call(self, activity, activity.type);
});
this._activityChannel.bind('page-load', function(activity) {
self._handleActivity.call(self, activity, 'page-load');
});
this._activityChannel.bind('test-event', function(activity) {
self._handleActivity.call(self, activity, 'test-event');
});
this._activityChannel.bind('scroll', function(activity) {
self._handleActivity.call(self, activity, 'scroll');
});
this._activityChannel.bind('like', function(activity) {
self._handleActivity.call(self, activity, 'like');
});

this._itemCount = 0;
};

PusherActivityStreamer.prototype._handleActivity = function(activity, eventType) {
var self = this;
++this._itemCount;

var activityItem = PusherActivityStreamer._buildListItem(activity);
activityItem.addClass(eventType);
activityItem.hide();
this._activityList.prepend(activityItem);
activityItem.slideDown('slow');

if(this._itemCount > this.settings.maxItems) {
this._activityList.find('li:last-child').fadeOut(function(){
$(this).remove();
--self._itemCount;
});
}
};

PusherActivityStreamer.prototype.sendActivity = function(activityType, activityData) {
var data = {
activity_type: activityType,
activity_data: activityData
};
if(this._email) {
data.email = this._email;
}
$.ajax({
url: 'php/trigger_activity.php', // PHP
// url: '/trigger_activity', // Node.js
data: data
})
};


PusherActivityStreamer._buildListItem = function(activity) {
var li = $('<li class="activity"></li>');
li.attr('data-activity-id', activity.id);
var item = $('<div class="stream-item-content"></div>');
li.append(item);

var imageInfo = activity.actor.image;
var image = $('<div class="image">' +
'<img src="' + imageInfo.url + '" width="' + imageInfo.width + '" height="' + imageInfo.height + '" />' +
'</div>');
item.append(image);

var content = $('<div class="content"></div>');
item.append(content);

var user = $('<div class="activity-row">' +
'<span class="user-name">' +
'<a class="screen-name" title="' + activity.actor.displayName + '">' + activity.actor.displayName + '</a>' +
//'<span class="full-name">' + activity.actor.displayName + '</span>' +
'</span>' +
'</div>');
content.append(user);

var message = $('<div class="activity-row">' +
'<div class="text">' + activity.body + '</div>' +
'</div>');
content.append(message);

var time = $('<div class="activity-row">' +
'<a href="' + activity.link + '" class="timestamp">' +
'<span title="' + activity.published + '">' + PusherActivityStreamer._timeToDescription(activity.published) + '</span>' +
'</a>' +
'<span class="activity-actions">' +
'<span class="tweet-action action-favorite">' +
'<a href="#" class="like-action" data-activity="like" title="Like"><span><i></i><b>Like</b></span></a>' +
'</span>' +
'</span>' +
'</div>');
content.append(time);


return li;
};

Answer

If you want to replace the entire div instead of adding things to it, I think this will work.

Change

this._activityList.prepend(activityItem);

for

this._activityList.empty();
this._activityList.prepend(activityItem);

".prepend" adds the activityItem to the top of the div as you know, but ".empty()" will clear everything previously in the div before you do this.

Comments