jQuery AJAX - How to show every couple seconds other results same table

Question

currently i have static show, wwhich show 3 last items from table :

DB Table :

  id        |        question       |      answer  
 -------------------------------------------------
 1          |           Q?          |     A?
 2          |           Q?          |     A?
 3          |           Q?          |     A?
 4          |           Q?          |     A?
 5          |           Q?          |     A?
 6          |           Q?          |     A?

So far i show with PHP foreach , last 3 items.

I want that it will dynamicly will show every time each 3 items with nice animate and will loop forever.

How can i do it with ajax or what ? thanks in advance.

EDIT(Deleted old codes).

---

Bahaaldine Azarmi,Here what i did:

1. I created new php file called indexaskrefresh.php, inside that php i inserted the following php code:

$query = "SELECT * FROM que limit " .$offset. "," .$pageSize ;
mysql_query("SET NAMES 'utf8'");

$result = mysql_query($query, $func->connection);

if(!$result) //ERROR IN YOUR SQL QUERY
return false;

if(mysql_num_rows($result)==0) //NO ROWS IN TABLE pages
return false;

while($row = mysql_fetch_array($result, MYSQL_ASSOC)) // CHANGE THE RESULT TO 2 DIMMENSIONAL ARRAY
{
     $returned_array[] = $row;
}

return $returned_array;

2. Next in my index file i created new div called ask , and in the top of the page i created new javascript tags the following(Index.php):

<script type="text/javascript">

 // global vars
var offset = 0;
var pageSize = 3;


function callMyPhpScript() {
    var parameters = new Object();
    parameters.offset = offset;
    parameters.pageSize = pageSize;
    $.ajax("modules/indexaskrefresh.php", parameters)
        .done(onDone)
        .fail(onFail);
}


function onDone(data) {
    // if no data was returned then you should reset the offset
    if ( data.length == 0 ) {
        offset = 0;
    } else {
        $('#ask').empty.append(data).show('slow');
        // I assume here that data is well formed 
        // html code returned by you php script
        offset += 3;
    }
}


 $(function() {
// should be move in configuration ...
var N = 5000 // Call will be made every 5 seconds. 
setInterval(callMyPhpScript,N);
  });


</script>

The div that should contain the response (Inside the Index.php):

   <div id="ask" style="float:right;">
         <h2 style="margin-right:15px;"> כדאי לדעת :</h2>
            <?php
                 $i = 0;
                  $len = count($que);
                    foreach($que as $key=>$value)
                    {   
                      echo '<span style="color:blue;font-weight:bold;padding:5px;">'.$value['que'].'</span><br><span style="color:green;font-weight:bold;padding:5px;">'.$value['ans'].'</span>';

                     if ($i == $len - 1) {

                        }else{
                        echo '<hr style="margin-right:25px;">';
                        }

                       $i++;
                    }
            ?>
          </div>

Nothing happens ,like the script not working not post nothing or somthing i dont know..

Answer 1

So I assume you want that you want to call your PHP function every N seconds and refresh the 3 last items.

Here is one way to do that :

Create a javascript function which makes the call and send the offset and a page size. The offset will be the starting id and the page size the limit in you SQL query :

// global vars
var offset = 0;
var pageSize = 3;


function callMyPhpScript() {
    var parameters = new Object();
    parameters.offset = offset;
    parameters.pageSize = pageSize;
    $.ajax("http://myhost:myport/pathToMyPhpFunction", parameters)
        .done(onDone)
        .fail(onFail);
}

In your php script, you should get the parse the parameters and use it in you SQL query like this:

$query = "SELECT * FROM que limit " .$offset. "," .$pageSize ;
// That will return records from offset+1 to pageSize

Implement the onDone function to append the result in your HTML code

function onDone(data) {
    // if no data was returned then you should reset the offset
    if ( data.length == 0 ) {
        offset = 0;
    } else {
        $('#myContainer').empty.append(data).show('slow');
        // I assume here that data is well formed 
        // html code returned by you php script
        offset += 3;
    }
}

Then somewhere in you html code, when the page is loaded, call the setTimeout function to make the call every N seconds :

$(function() {
    // should be move in configuration ...
    var N = 5000 // Call will be made every 5 seconds. 
    setInterval(callMyPhpScript,N);
});

If you want fancy effects, I recommand to use Animate.css