2016-08-17 6 views
0

id div内のアイテム全体を置き換えるのですが、javascript/ajax/jqueryとfamilliarではなく、どのファイル私は編集します。 これはアクティビティストリームチュートリアルでpusher.comによって与えられたサンプルコードPusher phpとjavascriptを使用してid div内のアイテム全体を置き換える方法

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

DIV内のすべてのアイテムを交換するHTML ID

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

これは

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; 
}; 
JavaScript関数であります

答えて

1

divをdiv要素に追加するのではなくdiv要素全体を置き換えたい場合は、これがうまくいくと思います。

変更

this._activityList.prepend(activityItem); 

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

あなたが知っているように、 ".prependは" div要素の先頭にactivityItemが追加されますが、 ".empty()"

のために以前のすべてをクリアしますあなたがこれを行う前にdiv。

+0

ありがとうございますが、私の問題は今、replacewithは、私が置き換えたIDが既に消えているので、2回目の試みでは動作していません。どのように私はそれを動作させることができますか? – user3438096

+0

@ user3438096良い点。私は答えを修正したので、補充する前にそれを空にして、それを完全に置き換えるのではなく、 – ADyson

+0

作品!ありがとうございます、私はあなたが気にしない場合は別の質問があります。この "PusherActivityStreamer._buildListItem = function(activity){}"を "アクティビティ"としてループする方法は、値のリストを持つ配列になりました。それはid htmlに置いたときには未定義です。 – user3438096

関連する問題