me/example.html at master · roseapple/me · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<head>
	<!-- include jQuery library -->
	<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
	<script>

			$(document).ready(function(){


				 /* --- Define Global Variables --- */

  				 var tweets; //A relatively global variable to store and retrieve tweets


				 /* --- Define Functions --- */

  				 //Function that gets tweets, taking 3 parameters
  				 // - searchTerm: What phrase to look for
  				 // - rpp: Results per page
  				 // - callback: function to happen after a successful retrieval of tweets
  				 //Example: tweets = getTweets("Cooper Union", 10);
				 var getTweets = function(searchTerm, rpp, callback) {

				 	//set some defaults
					if(searchTerm === undefined) {
						console.log("searchTerm undefined");
					}

					if(rpp === undefined) {
						console.log("rpp undefined, setting default to 10");
						rpp = 10;
					}

					//construct the url based on the two parameters passed into the function
					var searchUrl = "http://search.twitter.com/search.json?q=" + searchTerm + "&rpp=" + rpp;
					console.log("Search url: "+searchUrl);

					//run the ajax query
					$.ajax({

						// our query URL
						url: searchUrl,

						// our specified data-type
						dataType:'jsonp',

						// If the Ajax was successful, use its 'response' to our query to create 'localStorage.twitterSearch'. Remember,
						// 'success:function()'' takes an argument, representing the query's response. We can call it whatever we want:
						// 'response', 'answer', 'stuffWeAskedFor', etc.
						success:function(response){

							// Create 'localStorage.twitterSearch' by turning the response into a string value.
							// This way, we can work with it as text.
							//localStorage.twitterSearch = JSON.stringify(response);

							//response is the full response object.
							//response.results is just the tweets from the response object.
							//response.results.length is performing the length operation on the results array from the response object.
							console.log("Number of responses:" + response.results.length);

							//use are relatively global tweets variable to store just the tweets from the response.
							//at this point, tweets is an array of tweets.
							tweets = response.results;

							//The third optional parameter for this function is a callback function.
							//Test to see if the variable "callback" has been defined, and is a function.
							//If it is a function, execute the function, and pass in the response object just in case the function could take advantage of it.
							if(typeof(callback) === "function") {
								callback(response);
								console.log("The ajax request callback function has been fired.");
							}

						},

						// Send an alert if our Ajax was failed.
						error: function(){
							alert('Error, error: does not compute.');
						}

					});

				 };

				 //Function to display tweets.
				 //Assumes that the tweets parameter passed into it is an array of tweets, as returned from the api.
				 var displayTweets = function(tweets) {

				 	console.log("displayTweets: attempting to display tweets");

				 	//loop through each tweet to display it
				 	$.each(tweets, function(index, tweet) {

				 		//output the tweet we're talking about
				 		console.log(tweet);

				 		//construct html we'd like to wrap around each tweet
				 		//give each tweet a unique id based on the tweet id
				 		var tweetHTML = "<li class='tweet' id='" + tweet.id_str + "'>" + tweet.text + "</li>";

				 		//take the tweet html we've constructed, and add it to the DOM
				 		$(tweetHTML).appendTo("#tweets");

				 	});

				 };


				 /* --- Start setting up the page --- */

				 //create the h2
				 //add a listener to it for a click event
				 $("<h2>Get 1 binder tweet</h2>").appendTo("body").on("click", function(){

				 	//when the h2 is clicked on, go get tweets, which ends up populating the tweets variable
				 	getTweets("binders", "1");
				 	console.log("attempting to log tweets:", tweets);

				 });

				 //create the h3
				 $("<h3>Display tweets</h3>").appendTo("body").on("click", function() {

				 	console.log("attempting to log tweets:", tweets);

				 	//create a ul to display tweets in, but only if it doesn't already exist
				 	if($("#tweets").length === 0) {
						$("<ul id='tweets' />").appendTo("body");
					};

					//create a new variable to store the most recent tweet ID in
					var lastTweetID;

					//create a scheduled task that happens every 10 seconds


				});	//end of the h3 listener

			}); // end of document.ready jquery block


	</script>

</head>
<body>
</body>
</html>