function displayTweet(index) {
var tweet = streams.home[index];
var $tweet = $('<div class="tweet"><div class="row"><a class="user">'+tweet.user+'</a><div class="time-stamp text-right">'+jQuery.timeago(tweet.created_at)+'</div></div><div class="row"><p class="message">'+tweet.message+'</p></div></div>');
$_____.click(function() {
var user = $(this).text().trim();
tweetEvents.filterByUser(user);
});
$tweet.prependTo($tweetStream);
$tweet.animate({'opacity': '1'}, 'slow');
}
Hi everyone,
I am trying to add the click event above to the HTML element with the ‘user class (’.user’).
I’d really appreciate any help with filling out the blank in the code above.
What I am trying to do is add a click event handler every time a tweet is displayed.
Here is my full code:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="data_generator.js"></script>
<script src="jquery.timeago.js"></script>
<link href="twittler.css" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<div id="clear-filter">Back to Hack Reactor</div>
<div class="profile-dashboard">
<div class="profile-card">
<div class="profile-card-top">
</div>
</div>
<div id="timeline">
<div id="new-tweet-alert">There is nothing new</div>
<div id="tweet-stream">
<!-- TWEETS GO HERE -->
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
/*
var $body = $('body');
$body.html('');
var index = streams.home.length - 1;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div></div>');
$tweet.text('@' + tweet.user + ': ' + tweet.message);
$tweet.appendTo($body);
index -= 1;
}
*/
//Get the current number of tweets
function tweetCount() {
return streams.home.length;
}
function displayTweet(index) {
var tweet = streams.home[index];
var $tweet = $('<div class="tweet"><div class="row"><a class="user">'+tweet.user+'</a><div class="time-stamp text-right">'+jQuery.timeago(tweet.created_at)+'</div></div><div class="row"><p class="message">'+tweet.message+'</p></div></div>');
$('.user').click(function() {
var user = $(this).text().trim();
tweetEvents.filterByUser(user);
});
$tweet.prependTo($tweetStream);
$tweet.animate({'opacity': '1'}, 'slow');
}
function displayNewTweets() {
for (var i = currTweetCount; i < newTweetCount; i++) {
displayTweet(i);
//read[i] = true; //the tweet has been read
}
currTweetCount = newTweetCount;
$newTweetAlert.html('Waiting for new tweets...');
}
// Check for new tweets periodically
function checkForNewTweets() {
// Check the current tweet count
newTweetCount = tweetCount();
// If current count is greater than original count
if (newTweetCount > currTweetCount) {
// Display new tweet alert with the number of new tweets available
$newTweetAlert.html('You have <strong>' + (newTweetCount - currTweetCount) + '</strong> new tweets!');
}
setTimeout(function() {
checkForNewTweets(tweetCount());
}, Math.random() * 7000);
}
function filterByUser(user) {
var tweets = $('.tweet');
for (var j = 0; j < tweets.length; j++) {
var currentUser = tweets.eq(j).find('.user').text().trim();
if (currentUser !== user) {
tweets.eq(j).slideUp();
}
}
//make the clear filter button appear
$clearFilter.slideDown();
}
function clearFilter() {
$('.tweet').css('display', 'block');
$clearFilter.css('display', 'none');
}
//Save DOM elements
var $tweetStream = $('#tweet-stream');
var $newTweetAlert = $('#new-tweet-alert');
var $clearFilter = $('#clear-filter');
// Get it started!!!
var currTweetCount = 0;
var newTweetCount = tweetCount();
displayNewTweets();
//An array that will hold the read status of all tweets
//var read = {};
var index = streams.home.length-1;
/*
//display first 11 tweets on page load
while (index >= 0) {
var newTweet = displayTweet(index);
//read[index] = true;
index -= 1;
}
*/
//check for more tweets
checkForNewTweets();
$newTweetAlert.click(function() {
displayNewTweets();
});
//This method is a shortcut for .on( "click", handler ). The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released.
//GOT TO MAKE THIS SPECIFIC TO CLICKING ON THE ACTUAL TWITTER USERNAME
/*
$('.tweet').click(function () {
var user = $(this).find('.user').text().trim();
filterByUser(user);
});
*/
$clearFilter.click(function() {
clearFilter();
});
});
</script>
</body>
</html>
The problem was the tweetEvents. That was a code remnant that I thought I deleted. The click event handler was being added to the HTML element, but when I was clicking on it, the filterByUser() wasn’t being called.