CODEWITHSUNDEEP
phpjavascriptjquerymysqlajax
normanram
normanram

Reputation: 21

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

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

Upvotes: 1

Views: 10660

Answers (6)

user583576
user583576

Reputation: 619

$(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

Upvotes: 1

Francois Deschenes
Francois Deschenes

Reputation: 24969

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);

Upvotes: 3

aNj
aNj

Reputation: 174

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);
});

Upvotes: 1

Declan Cook
Declan Cook

Reputation: 6126

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)

Upvotes: 1

Bj&#246;rn
Bj&#246;rn

Reputation: 2648

A really basic example:

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

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

Upvotes: 2

NullRef
NullRef

Reputation: 3743

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");
     }
   });
};

Upvotes: 1

Related Questions