Reading from a MYSQL table every 5 seconds and dynamically displaying results on a PHP page without refreshing

Question

I'm looking to display data from a table in a mysql database using PHP, however, I want the data to automatically update itself and retrieve current values every 5 seconds.. WITHOUT having to refresh the page. Is this possible? Maybe with JQuery/ AJAX? If so, please explain how it can be done / point me to a resource where I can find such information

Thanks

Answer 1

If you use window.setInterval() and jQuery's .load() you should be able to do what you want. The PHP script should return the HTML that needs to replace the previous one.

Javascript:

function refreshData()
{
  // Load the content of "path/to/script.php" into an element with ID "#container".
  $('#container').load('path/to/script.php');
}

// Execute every 5 seconds
window.setInterval(refreshData, 5000);

Answer 2

A really basic example:

  function poll(){
       $.ajax({
           type: "GET", 
           url: "your/php/script/",
           success: function(data){
              // do something with data
           }

       });
   };
   setInterval(poll, 5000);

Answer 3

jQuery is a good option. Here are the docs for ajax.

You will want to make this call with setInterval

Something like this might get your started.

setIntervla(updateFromDb,5000);

function updateFromDb(){
   $.ajax({
      url: "getUpdates.php",
     success: function(){
     $(this).addClass("done");
     }
   });
};

Answer 4

What you are describing is exactly the type of the AJAX is used for, AJAX allows for asynchronous requests to be made to your server.

For learning I would suggest using a framework like Jquery and look into the AJAX api.

Basicly you will need a PHP script that query the database and responds the results the way you want them. A suggestion would be to JSON encode them.

In JavaScript on the client you will need to you things like:

var poll = setInterval(function(){
   $.ajax({
     type:"GET",
     url: "yourpage.php",
     success: function(data){
        //HANDLE DATA
        // use JSON.parse(data); if your JSON encoding your data  
    }
   });
},5000)

Answer 5

Just go to the documentation of jQuery:

http://api.jquery.com/category/ajax/

Use the command "jQuery.get()" or better "jQuery.getJson()" to make a http request to the server. Use JSON to get a better communication between server and client. Return from server side a json string and convert this on the client to an javascript object. (the function jQuery.getJson already do this for you) so you can easily access the key and values in the data array.

Just an example:

SERVER Part with PHP:

<?

$data = array('key'=>'value');
return json_encode($data, true);

CLIENT Part:

$.getJSON('myurl.php', function(data) {
    // THIS ONE IS CALLED with your PHP data
    alert(data.key);
});

Answer 6

$(function(){
window.setInterval(function(){
    $.post("filename.php",{'field1':field1,'field2':field2,'field3':field3},function(data){
    //callbackfunction(data)
})
},30000);//millisecs

});

And have your php file do all your sql