How do i refresh my Twitter API every 15 seconds?

Question

I was successful in installing the TWITTER API jquery script, but I can't figure out how to make the script refresh with the latest tweets without refreshing the entire page IN 15 SECOND INTERVALS. Is it possible to use a .load or refreshID to reload script? Can I also include a fade in and fade out when the function reloads?

Anyone done this?

Many thanks.

Erik

Here is my script:

<script src="/src/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/src/jquery/jquery.jtwitter.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
    // Get latest 6 tweets by jQueryHowto
    $.jTwitter('eriksnet', 3, function(data){
        $('#posts').empty();
        $.each(data, function(i, post){
        $('#posts').append(
            '<div class="post">'
            +' <div class="txt">'
            // See output-demo.js file for details
            +    post.text
            +' </div>'
            +'</div>'
        );
    });
});
});
</script>



<div id="posts">Getting Erik's tweets...</div>

Answer 1

Try putting your jTwitter call in a function and calling it via setInterval

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

(about half way down the page)

Answer 2

You will want to create an interval so that your application polls every 15 seconds. Mozilla's developer center has an article on the basics of using setInterval that will get you started.

Basically, you'll do something like this:

var f = function(){
    $.jTwitter('[user]',6,function(data){
        $('#posts').fadeOut('fast',function(){
            // build your html
            $(this).append(yourHtml).fadeIn();
        });
    });
};
$(document).ready(function(){ setInterval(f,15000); });

Answer 3

look into a jquery plugin $.doTimeout, it makes this pretty trivial.

http://benalman.com/projects/jquery-dotimeout-plugin/

<script type="text/javascript">
$(document).ready(function(){
    // Get latest 6 tweets by jQueryHowto
    $.doTimeout(15000, function() {
        $.jTwitter('eriksnet', 3, function(data){
            $('#posts').empty();
            $.each(data, function(i, post){
                $('#posts').append(
                    '<div class="post">'
                    +' <div class="txt">'
                    // See output-demo.js file for details
                    +    post.text
                    +' </div>'
                    +'</div>'
                );
            });
        });
        return true;
    });
});
</script>

Just make sure that you include the dotimeout js file in your code.