2

I have an HTML page with a div containing the value of a php variable, which is from a mysql query. I want the div to auto-refresh in order to see any new data from an SQL query. I searched a week for the right code, but nothing... . The div code is the following:

<div id="last10">   
    <table width="838" cellpadding="1" cellspacing="1" class="categorie1"> 
        <tr style='font: bold 12px verdana;'> 
            <td width="149" align="center">Browser</td>
            <td width="99" align="center">OS</td>
            <td width="248" align="center">Date</td>
            <td width="103" align="center">IP</td>
            <td width="108" align="center">Country</td>
            <td width="110" align="center">Referrer</td> 
        </tr>
        {$recent_visits}        
    </table>
</div>
Improve this question

4 Answers 4

Reset to default
2

PHP is a server-side language, HTML and JavaScript are client-side. So, you need to use AJAX to update some data in HTML/JavaScript using PHP

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

1 Comment

I understand that. I searched and tried numerous ajax codes, but nothing worked... I am rookie in programming, that is why I asked for help
2

You're going to need to use AJAX if you want to resist a whole page refresh. Basic steps:

  1. Create either a new page or a specific function of the current page just for retrieving the new value. This can be get_recent_visits_count.php or current_page.php?get_recent_visits.
  2. Look up making AJAX calls (I recommend using jQuery's get for simplicity) and retreve the value
  3. Place that value on the page.
  4. Once you are able to get the information, place that code in a setInterval (or alike) and have it refresh periodically.

If you want to keep the code on the same page try something like this (added to the top of the page):

<?php
  if (isset($_GET['get_recent_visits']))
  {
    // query your DB for just the numeric value and echo it here.
    exit;
  }
?>

Then, in your HTML page try something like the following:

1st, place an element you want to populate with the new value on the page:

<span id="recent-visits"></span>

Then, in the <head> section of your page you're going to need to include jQuery and the ajax code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
  // wait for document to be ready
  $(function(){

    // make the code execute every so many seconds (time assigned at bottom)
    setInterval(function(){

      // make the ajax call to the same page, passing it the GET variable so
      // it only echos the number we want
      $.get('<?php echo $_SERVER['REQUEST_URI']; ?>?get_recent_visits',function(num){

        // echo that number we just retrieved to the span we placed on the page
        $('#recent-visits').text(num);

      });

    }, 30 * 1000); // run every 30 seconds

  });
</script>

The above is just a simple way to get a single number to display on the page, but should get your feet wet. PHP offers the ability to dump JSON objects using json_encode which can be paired with jQuery's .getJSON to return more complex objects.

Improve this answer

2 Comments

I tried this steps, but as I said I am just a rookie... no experience. A demo code would help me a lot
@user: see my answer. I was working out a demo for you, but wanted to post premise first. ;-)
1

You'll have to use some use some ajax magic if you want the data to refresh automatically. More info is needed really. What's $recent_visits?

Improve this answer

1 Comment

a bit longer text, but here is defined:
0

I needed something similar a while back for my own project. I know I'm a "little" late but I'm hoping this could help other people looking for the same solution.

First, make a file. Let's call it data.php. This file should contain all your code to retrieve data from your database and this is where you put any relevant data into variables. This is some example code from my own project:

<?php
$cpu_load = sys_getloadavg();
$total_storage = disk_total_space("/");
$free_storage = disk_free_space("/");
$public_ip = file_get_contents("public_ip.txt");
?>

All this code does is it sets the variables and this is the only bit that will periodically be refreshed. You also need to add the contents of the DIV here (without the DIV tags though). This part should look something like this (obviously replacing my example variables):

<table width="838" cellpadding="1" cellspacing="1" class="categorie1"> 
    <tr style='font: bold 12px verdana;'> 
        <td width="149" align="center">Average CPU Load: <?php echo $cpu_load; ?></td>
        <td width="99" align="center">Total Storage: <?php echo $total_storage; ?></td>
        <td width="248" align="center">Free Storage: <?php echo $free_storage; ?></td>
        <td width="103" align="center">Public IP: <?php echo $public_ip; ?></td>
    </tr>       
</table>

Next, in your main page you could use something like this:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {

  $("#refresh").click(function() {
     $("#last10").load("data.php");

    return false;
    });
});
function refresh() {
$("#refresh").click();  
}
setInterval(refresh, 100);
</script>
<a href="#" id="refresh" hidden="">Refresh</a>
<div id="last10"></div>

This simply creates a hidden link and "clicks" it to refresh the div.

I think this should answer your question. Ask in comments if you need any clarification. Hope this helps some people :)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.