Question

Facebook has introduced a ticker which shows live news scrolling down. How can I have this same time of functionality on my site? I don’t care to use an iframe and have it refresh because it will A flicker and B make the page loading icon come up (depending on browser). How can this be done?

Answer 1

For this you’d want to fetch the data you’re looking for with AJAX every X seconds.. Also known as polling.

Here’s the break down: Every X seconds, we want to query our database for new data. So we send an asychronous POST to a php page, which then returns a data set of the results. We also declare a callback function (native to jQuery) that will be passed the data echo’d from our PHP.

Your PHP:

if (isset($_POST['action'])){
    if ($_POST['action'] == 'pollNewData'){
        pollNewData();
    }
}

function pollNewData(){
    $term = $_POST['term'];
    $sql = "select * from TABLE where TERM = '$term'";
    $result = get_rows($sql);
    echo json_encode(array('status'=>200, 'results'=>$results));
}

Your front end javascript:

setTimeout(pollForNewData, 10000);

function pollForNewData(){
    $.post('url/ajax.php',{
        action: 'pollNewData',
        term: 'your_term'
    }, function(response){
        if (response.status == 200){
            $.each(response.results, function(index, value){
               $("#container").append(value.nodeName);
            });
        }
    }, 'json');
}

What essentially is going on here is that you will be posting asynchronously with jQuery’s ajax method. The way you trigger a function in your PHP would be by referencing a key-value item in your post depicting which function you want to call in your ajax request. I called this item “Acton”, and it’s value is the name of the function that will be called for this specific event.

You then return your data fetched by your back end by echo’ing a json_encoded data set.

In the javascript, you are posting to this php function every 10 seconds. The callback after the post is completed is the function(response) part, with the echo’d data passed as response. You can then treat this response as a json object (since after the function we declared the return type to be json.