Jquery $.each Loop multiple rows
I have jquery displaying data from a JSON file on my website that is displaying tweets from a particular Hashstag from twitter:
http://ijpweb.com/tweetlist/
The JSON file on my server collects 100 tweets from twitter and caches them and updates every 10 minutes.
Basically want i want to do is only have 4 rows of 25 tweets each.
How can the $.each loop be modified to accomplish this?
here is my code:
in the end i will be having each row "tweet_scroll" scroll slowly in opposite directions.
http://ijpweb.com/tweetlist/
The JSON file on my server collects 100 tweets from twitter and caches them and updates every 10 minutes.
Basically want i want to do is only have 4 rows of 25 tweets each.
How can the $.each loop be modified to accomplish this?
here is my code:
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("json.php",function(data) {
$.each(data.results, function(i, item) {
var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
$('#Tweet').append(listData);
});
});
});
</script>
</head>
<body>
<div id="tweet_scroll1">
<div id="Tweet"></div>
</div>
<div id="tweet_scroll2">
<div id="Tweet2"></div>
</div>
<div id="tweet_scroll3">
<div id="Tweet3"></div>
</div>
<div id="tweet_scroll4">
<div id="Tweet4"></div>
</div>
in the end i will be having each row "tweet_scroll" scroll slowly in opposite directions.
Last Comment
ASKER
I updated the page with your solution and doesnt appear to work:
http://ijpweb.biz/tweetlist/
on a side note.. i was hoping to refresh the data every 10 minutes or so. Basically i was going to have the Tweets disappear with jquery through fading or sliding down.. then reappear with new tweets. Does that effect your code?
http://ijpweb.biz/tweetlist/
on a side note.. i was hoping to refresh the data every 10 minutes or so. Basically i was going to have the Tweets disappear with jquery through fading or sliding down.. then reappear with new tweets. Does that effect your code?
ASKER
i fixed the error and got it to work...
there was a missing ":" in your code
i have it displaying rows great!.
Now.. does this need to be adjusted if i have things auto update?
there was a missing ":" in your code
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("json.php",function(data) {
$.each(data.results, function(i, item) {
var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
$('#Tweet'+(i>74?"4":i>49?"3":i>24?"2":"")).append(listData);
});
});
});
</script>
i have it displaying rows great!.
Now.. does this need to be adjusted if i have things auto update?
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
thank you so much for helping! i think you were typing to fast again :) You included a "^" next to #Tweet which was throwing an error. Also the ");" at the end i think and setTimeOut should be setTimeout .. i made those two edits and it worked
<script type="text/javascript">
function update(){
$.getJSON("json.php",function(data) {
$("#Tweet").html("");
$.each(data.results, function(i, item) {
var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
$('#Tweet'+(i>74?"4":i>49?"3":i>24?"2":"")).append(listData);
});
setTimeout("update()",600000);
});
}
$(document).ready(function() {
update();
});
</script>
ASKER
very helpful and even added a little extra more
ASKER
@JonNorman - since you were so helpful i have another question/problem related to this same script here if you want more points :) https://www.experts-exchange.com/questions/27727397/Scroll-Javascript-Generated-Content-with-JQUERY-and-Cycle-Plugin.html
The ^ was supposed to check for all divs with ids that started with Tweet. That way the html of the four divs would be wiped out, not just the first div.
try:
I will have a quick look at the question...
try:
<script type="text/javascript">
function update(){
$.getJSON("json.php",function(data) {
$("div[id^=Tweet]").html("");
$.each(data.results, function(i, item) {
var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
$('#Tweet'+(i>74?"4":i>49?"3":i>24?"2":"")).append(listData);
});
setTimeout("update()",600000);
});
}
$(document).ready(function() {
update();
});
</script>
I will have a quick look at the question...
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
Open in new window
I think that is what you are after, it assumes that you have 100 items, it also assumes that you don't want to update them while the person is looking at the page (that's a bit more difficult and probably unnecessary).