Display Only One Item from Database at a time and Loop through other in time cycle

Question

I am having a project, to display some details on Main Screen of my office, but problem is that I want to display only Item a time and then cycle through each item in time period.

Below is my php, Java Sciptis and index page.

index.html

<ul></ul>
<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="script/my_script.js"></script>

fetch.php

<?php
        include_once('db.php');

        $sql = "SELECT * FROM employee";
        $res = mysql_query($sql);
        $result = array();

        while( $row = mysql_fetch_array($res) )
            array_push($result, array('ID' => $row[0],
                                      'Name'  => $row[1],
                          'Post' => $row[2]));

        echo json_encode(array("result" => $result));
?>

my_script.js

$(document).ready( function(){
done(); 

});

function done() {
    setTimeout(function() {
        updates();
        done();
        },200);

}

function updates() {
$.getJSON("fetch.php", function(data) {
    $("ul").empty();

    $.each(data.result,function(){
        $("ul").append("<li>ID: "+this['ID']+"</li><li>Name: "+this['Name']+"</li><li>Designation: "+this['Post']+"</li><br />");
    });
}); 
}

I have not wrote this script. SO I need some help As the above script will display items without refreshing it, I want to display only on item at a time.

Thanks!!!

Answer 1

From your comments I think this will work for you. It fetches the data once, when the page loads, and then loops infinitely (starting from the beginning again when it reaches the end of the data).

var i = 0; // index of data to iterate.
var d = null; // where we store the result of the query.
var interval = 1000; // interval in ms.

$(document).ready(function()
{
    // get the data *once* when the page loads.
    $.getJSON('fetch.php', function(data)
    {
        // store the data in the global var 'd'.
        d = data.result;

        // create a recurring call to update().
        setInterval(function()
        {
            update();
        },
        interval);
    });
});

function update()
{
    // if there isn't another element, reset to the first one.
    if (!d[i]) i = 0;

    // remove previous item from page.
    $('ul').empty();

    // add next item to page.
    $("ul")
        .append(
            '<li>ID: ' + d[i]['ID']
            + '</li><li>Name: ' + d[i]['Name']
            + '</li><li>Designation: ' + d[i]['Post']
            + '</li>'
        );

    // increment index for next iteration.
    i++;
}

---

Alternative version that re-fetches after reaching the last record

var i = 0, // index of data to iterate.
    d = null, // where we store the result of the query.
    x = null, // stored interval so clearInterval() can be used.
    interval = 1000; // interval in ms.


$(document).ready(function()
{
    fetch();
});

function fetch()
{
    // get the data *once* when the page loads.
    $.getJSON('fetch.php', function(data)
    {
        // store the data in the global var 'd'.
        d = data.result;

        // create a recurring call to update().
        x = setInterval(function()
        {
            update();
        },
        interval);
    });
}

function update()
{
    // if there isn't an array element, reset to the first one.
    if (!d[i]) {
        clearInterval(x);
        i = 0;
        fetch();
        return;
    }

    // remove previous item from page.
    $('ul').empty();

    // add next item to page.
    $("ul")
        .append(
            '<li>ID: ' + d[i]['ID']
            + '</li><li>Name: ' + d[i]['Name']
            + '</li><li>Designation: ' + d[i]['Post']
            + '</li>'
        );

    // increment index for next iteration.
    i++;
}