如何使用 Pusher php 和 javascript 替换 id div 内的整个项目
How to replace the whole item inside the id div using Pusher php and javascript
我想替换 ID div 中的整个项目,而不是添加 it.I 我不熟悉 javascript/ajax/jquery,我不知道我将编辑哪个文件。
这是pusher.com在activity-stream教程
中给出的示例代码
$(function() {
var pusher = new Pusher('pusher key');
var channel = pusher.subscribe('site-activity');
var streamer = new PusherActivityStreamer(channel, '#replace_item');
});
html 将替换 div
中所有项目的 ID
<div id="replace_item">ITEMS</div>
这是javascript函数
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;
};
如果您想替换整个 div 而不是向其中添加东西,我认为这会起作用。
改变
this._activityList.prepend(activityItem);
为了
this._activityList.empty();
this._activityList.prepend(activityItem);
如您所知,".prepend" 将 activityItem 添加到 div 的顶部,但是在您执行此操作之前,".empty()" 将清除 div 中之前的所有内容。
我想替换 ID div 中的整个项目,而不是添加 it.I 我不熟悉 javascript/ajax/jquery,我不知道我将编辑哪个文件。 这是pusher.com在activity-stream教程
中给出的示例代码$(function() {
var pusher = new Pusher('pusher key');
var channel = pusher.subscribe('site-activity');
var streamer = new PusherActivityStreamer(channel, '#replace_item');
});
html 将替换 div
中所有项目的 ID <div id="replace_item">ITEMS</div>
这是javascript函数
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;
};
如果您想替换整个 div 而不是向其中添加东西,我认为这会起作用。
改变
this._activityList.prepend(activityItem);
为了
this._activityList.empty();
this._activityList.prepend(activityItem);
如您所知,".prepend" 将 activityItem 添加到 div 的顶部,但是在您执行此操作之前,".empty()" 将清除 div 中之前的所有内容。