Question

I am working on a script which will “fetch” the latest tweets from the Twitter API, and then display them as HTML on my page using JQuery.

I’m new to JQuery, so if someone could point me in the direction of the necessary function on the JQuery site I would be most grateful.

I currently have built the following script:

<!-- Use the Google jQuery CDN for lib support -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Setup and fetch the JSON data -->
<script type="text/javascript">
$(document).ready(function(){
var url='http://search.twitter.com/search.json?callback=?&q=@req';
$.getJSON(url,function(json){
<!-- Iterate the file -->
        $.each(json.results,function(i,tweet){
           $("#results").append('<p><img src="'+tweet.profile_image_url+'" widt="48" height="48" />'+tweet.text+'</p>');
$("#results").slideDown("slow");
        });
                    });
});
</script>
<!-- Output the file into the DIV -->
<div id="results"></div>

The script is working fine, however I would now like to incorporate some form of automatic refresh of the content. I.e “re-fetch” the feed every x minutes.

From what I understand I need to replace .append with .html in order that the content is removed from the page before reload, however does anyone have any suggestions as to the best way of actually getting the content to refresh? I have found may articles expressing concerns over browser memory leaks etc, and don’t want to head down the wrong path.

I look forward to you responses, and thanks again.

Answer 1

$(function(){
    function getTweets() {
        var url='http://search.twitter.com/search.json?callback=?&q=@req';
        $.getJSON(url,function(json){

            //setup an array to buffer output
            var output = [];

            //a for loop will perform faster when setup like this
            for (var i = 0, len = json.results.length; i < len; i++) {

               //instead of appending each result, add each to the buffer array
               output.push('<p><img src="' + json.results[i].profile_image_url + '" widt="48" height="48" />' + json.results[i].text + '</p>');
            }

            //now select the #results element only once and append all the output at once, then slide it into view
            $("#results").html(output.join('')).slideDown('slow');
        });
    }

    //set an interval to run the getTweets function (30,000 ms is 5 minutes), you can cancel the interval by calling clearInterval(timer);
    var timer = setInterval(getTweets, 30000);

    //run the getTweets function on document.ready
    getTweets();

});

Here is some good documentation for window.setInterval(): https://developer.mozilla.org/en/window.setInterval