troubleshooting Question

Scroll Javascript Generated Content with JQUERY and Cycle Plugin

Avatar of jporter80
jporter80Flag for United States of America asked on
JavaScriptAJAXjQuery
2 Comments1 Solution734 ViewsLast Modified:
I have JSON data (tweets) generated and displayed on my page like this:

http://ijpweb.biz/tweetlist/

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="/tweetlist/script.js"></script>
<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>
</head>
<body>
<div class="tweet-row">
<ul id="tweet_scroll1">
	<li id="Tweet"></li>
</ul>
</div>
<div class="tweet-row" id="tweet_scroll2">
<ul>
	<li id="Tweet2"></li>
	<div class="clear"> </div>
</ul>
</div>
<div class="tweet-row" id="tweet_scroll3">
<ul>
	<li id="Tweet3"></li>
	<div class="clear"> </div>
</ul>
</div>
<div class="tweet-row" id="tweet_scroll4">
<ul>
	<li id="Tweet4"></li>
	<div class="clear"> </div>
</ul>
</div>
                                  
</body>
</html>

Which works great..

Now i need to cycle each rows content.. and i was going to use the Cycle Jquery Plugin:

found in this document: http://ijpweb.biz/tweetlist/script.js
Reference: http://jquery.malsup.com/cycle/

But i think the content is generated by Javascript the plugin doesnt recognize the html being generated. Because it only recogonizes the one <li id="Tweet"></li> not the ones that get generated from the JSON data.

Firebug error: [cycle] terminating; too few slides: 1

Example that is not working:

http://ijpweb.biz/tweetlist/index-cycle.php

Updated Javascript
<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();
	$('#tweet_scroll1').cycle({ 
        fx:      'scrollDown', 
        speed:    300, 
        timeout:  2000 
});
});
</script>

how can i get the cycle plugin to recognize the javascript generated content?
ASKER CERTIFIED SOLUTION
Jon Norman
Information Systems Manager
Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros