PHP refresh data every 3 second using javascript

Question

i am trying to read data every three seconds without reloading the page. I am missing something in my script because it doesn't refresh data until i reload the page. Thanks in advance.

<html>
   <head>
       <meta charset="UTF-8">
       <title>Testing</title>       
      <!-- below script is for jquery --> 
       <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
       <script type="text/javascript">
           function refreshData(){
               $.ajax({
                 url: 'localhost/index1.php',
                 type:"POST",
                 data:"dataPost", 
                 success: function(data){
                 document.getElementById("dataPost").innerHTML = data;

                   //render the dynamic data into html
                 }
               });
           }
           setInterval(refreshData, 3000);
           </script>
   </head>
   <div id="dataPost">
   <?php
       $conn = mysql_connect('localhost','user','password');    
       $db = mysql_select_db('db',$conn);
       $query = "select * from table";
       $result = mysql_query($query);
       while($row = mysql_fetch_array($result))
       {
           echo $row['data1']."<br/>";
       }
   ?>
   </div>    
</html>

i tried it doesnt work. console doesn't show any error, it just does not refresh data at specific interval — rutulPatel
– rutulPatel, Commented Jan 24, 2014 at 21:24

dev7 · Accepted Answer · 2014-01-24 22:21:25Z

2

I agree with @Axel but since Ajax is an Async function, even if your PHP code was in an external file, you would still have timing problems.

Basically, you can't know how long it takes for the Ajax call to complete (imagine the server being busy or down), so setting intervals manually to every 3 seconds make no sense. You need to set it to 3 seconds from the last completion.

On your php - just put your script in an external file (i.e script.php).

On your Javascript -

Move the setInterval() inside the success event, and use setTimeout() instead.

Create document.ready event and call the refreshData() from it.

  <script type="text/javascript">
    $(document).ready(function() {
    refreshData();
    });
               function refreshData(){
                   $.ajax({
                     url: 'localhost/script.php',
                     type:"POST",
                     data:"dataPost",
                     success: function(data){
                     document.getElementById("dataPost").innerHTML = data;//why not use $('#dataPost').html(data) if you're already using jQuery?
                        setTimeout(refreshData, 3000);//will make the next call 3 seconds after the last one has finished.
                       //render the dynamic data into html
                     }
                   });
               }

               </script>

And your PHP file (script.php) will look like:

<?
       $conn = mysql_connect('localhost','user','password');    
       $db = mysql_select_db('db',$conn);
       $query = "select * from table";
       $result = mysql_query($query);
       while($row = mysql_fetch_array($result))
       {
           echo $row['data1']."<br/>";
       }
   ?>

Hope this helps.

P.S as many people will point out, mysql_connect is being deprecated so it will be best practice to start using MySQLi or PDO instead.

edited Jan 24, 2014 at 22:21

answered Jan 24, 2014 at 21:50

dev7

6,4196 gold badges36 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rutulPatel Over a year ago

it didnt work until i changed version number of javascript. But i agree with you that the way showed is the right way. +1 for that. Thanks.

rutulPatel Over a year ago

the right answer is changing the version of javascript. Google chrome was not picking up old javascript so i changed to 1.8.0 version and it worked fine.

Axel Amthor · Accepted Answer · 2014-01-24 21:44:35Z

0

instead of calling the page itself, put the php code from out the div in to a single .php file and call this file within the AJAX call. that's all.

answered Jan 24, 2014 at 21:44

Axel Amthor

11.1k1 gold badge28 silver badges45 bronze badges

Comments

rutulPatel · Accepted Answer · 2014-01-25 16:08:13Z

0

I found that the reason it was doing that is version of javascript. I used 1.8.0 and it started working fine. It was working whole time but google chrome had version issues. I did little research and tried changing version number and it worked.

answered Jan 25, 2014 at 16:08

rutulPatel

3206 silver badges12 bronze badges

1 Comment

Kaz Over a year ago

version of jQuery please, not javascript

Collectives™ on Stack Overflow

PHP refresh data every 3 second using javascript

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related