Question

I’d like to have a div on my web page that is based off of the data in my MySQL database. When the data in the database changes, the content in the div should change as well.

Example: Let’s say I have a field in the first row of a table called “server_statistics” in my MySQL database which keeps track of a server being online or offline. When the server goes offline, the MySQL field changes from 1 to 0. When it goes online, it goes from 0 to 1.

So I want to use Javascript to display the server status on my webpage and update it without refreshing the page.

I thought I’d be able to do it like this:

<script type="text/javascript">
    var int = self.setInterval("update()", 1000);
    function update() {
        var statusElement = document.getElementById("status");
        var status = "<?php 
            $con = mysql_connect("localhost", "root", "");
            mysql_select_db("database_name", $con);
            $row = mysql_fetch_array(mysql_query("SELECT * FROM server_statistics LIMIT 1"));
            mysql_close($con);
            echo $row[0]; ?>";
        if (status == 0) {
            statusElement.style.color = "red";
            statusElement.innerHTML = "offline";
        }
        else {
            statusElement.style.color = "green";
            statusElement.innerHTML = "online";
        }
    }
</script>

But this doesn’t work. The page needs to be refreshed for it to update and I don’t know why…

I’ve read I can use JQuery but I have no knowledge of this language at all.

I tried this:

<script type="text/javascript">
    var int = self.setInterval("update()", 1000);
    function update() {
        $('#status').load('load.php');
    }
</script>

and then in load.php I had this:

<?php
    echo "test";
?>

But nothing happened after 1 second passed. I’m probably doing it wrong because as I said, I don’t know anything about this JQuery/AJAX stuff.

So how can I accomplish retrieving a field from a MySQL database at every specified interval and then automatically update an HTML element accordingly? It would be ideal to only update the HTML when a change occurred in the database but for now, I just want it to change every few seconds or minutes…

Thanks in advance.

Answer 1

What you need to do is utilize AJAX. Your page will need to make a request to the server each time it wants to check the status. There are two ways to do it: manually refresh the page yourself, or use an AJAX call.

AJAX really isn’t all that difficult, you start by creating a separate PHP page check_status.php with the following in it:

<?php 
    $con = mysql_connect("localhost", "root", "");
    mysql_select_db("database_name", $con);
    $row = mysql_fetch_array(mysql_query("SELECT * FROM server_statistics LIMIT 1"));
    mysql_close($con);
    echo $row[0]; ?>

Then, in your HTML page, the easiest way to do this would be to use jQuery:

var statusIntervalId = window.setInterval(update, 1000);

function update() {
    $.ajax({
        url: 'check_status.php',
        dataType: 'text',
        success: function(data) {
            if (parseInt(data) == 0) {
                $("#status").css({ color: "red" }).text("offline");
            } else {
                $("#status").css({ color: "green" }).text("online");
            }
        }
    }
}

That’s it really. Every second, it will call the update() method which makes an AJAX call and inserts the result back into your HTML.