Continues SQL queries on PHP

Question

I have a PHP script that takes an array of Instance-ID (int) and performs a SQL query for each one, writing the results to a table.

I want to refresh the data from the database every X seconds (or with every new data) but I couldn't find a way to do so.

function checkStatus()
{   
    global $instances_ID;
    // Create connection
    $con=mysqli_connect("*******","*****","*****","****"); 

   // Check connection
   if (mysqli_connect_errno($con))
    {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    //Clear page
    echo "<script type='text/javascript'>\n";
    echo "document.body.innerHTML = ''";
    echo "</script>";   

    echo "<h3><center>Last Backups:</center></h3><br><br>";

    //Build table
    echo "<table border='1'align='center'>
    <tr>
    <th>Instance ID</th>
    <th>Backup ID</th>
    <th>STATUS</th>
    <th>Start Time</th>
    <th>End Time</th>
    <th>Progress</th>
    <th>Servlet</th>
    </tr>";
    foreach ($instances_ID as $id)
    {
        $result = mysqli_query($con,"SELECT * FROM `instance_backups` WHERE INSTANCE_ID='".$id."' ORDER BY `instance_backups`.`START_TIMESTAMP` DESC LIMIT 1");
        $row = mysqli_fetch_array($result);
    echo "<tr>";
    echo "<td align='center'>" . $row['INSTANCE_ID'] . "</td>";
    echo "<td align='center'>" . $row['INSTANCE_BACKUP_ID'] . "</td>";
    echo "<td align='center'>" . $row['STATUS'] . "</td>";
    echo "<td align='center'>" . $row['START_TIMESTAMP'] . "</td>";
    echo "<td align='center'>" . $row['END_TIMESTAMP'] . "</td>";
    echo "<td align='center'>" . $row['PROGRESS_PERCENTAGE'] . "</td>";
    echo "<td><input type=button onClick=location.href='******' value='Immidiate Backup'>";
    echo "</tr>";       
    }

    echo "</table>";
    //Close the connection
    mysqli_close($con);
}

Answer 1

First, you'll need a javascript library. I highly suggest jQuery. Download the most current version, and upload it to your server, preferably uploading it to a separate folder like 'jscripts' or something.

Now research setInterval(). Use a small and quick function to show its usefulness. setInterval( function name, x ) -- calls a function every x milliseconds. If you do this:

function addText(){
    document.getElementById('testDiv').innerHTML = " HELLO ";
}
setInterval( addText, 1000 );

you would see that, if you had a div with the id='testDiv' that every 1 second it would add ' HELLO ' to the div, populating it endlessly.

Now, you research "jquery ajax" . This is more involved and I will not go over here in detail because of the many steps involved in this question, however, AJAX basically makes a background-connection to another script, and can fetch the output from it, all without refreshing the page. Once you link the three, you'll be laughing ...