Real time database changes with Ajax

Question

I'm building a website that prints the content in it's Mysql database to the page for the user to see. The database's content is going to be constantly added to, and I want to show those changes in real time on the page without the user having to reload. I'm using PHP to echo the contents of the database to the page right now and it works great, it's just that to see any new changes, the page has to be reloaded. So my question is, how do I make the page update itself in real time? I'm guessing this is going to involve Ajax but I'm rather new to javascript...

Would you guys mind pointing me in the right direction?

Here's what my database looks like:

id      author           body
----------------------------------------
1        jim              sample content
2         bob              more content
3         fred            some more!

I'm using the following PHP code to print the above data to the web page:

$query = mysql_query("SELECT * FROM log order by id desc") or die(mysql_error());
while($row = mysql_fetch_array($query)) :
   echo $row['author'];
   echo $row['body'];
endwhile;

Thanks!

I'm trying to get content from a database while they're just filling in a date — codedude
– codedude, Commented Dec 17, 2011 at 21:53
it's exactly the same principle, instead of sending back a date, you send back whatever info you want to display. — Drahcir
– Drahcir, Commented Dec 17, 2011 at 21:55
It's similar but it has some differences. I need the site to update without the user doing anything. The tizag tutorial has the user typing in content for it to respond. — codedude
– codedude, Commented Dec 17, 2011 at 21:58
You can use the Javascript function setInterval(), it will call a function every x secs — Drahcir
– Drahcir, Commented Dec 17, 2011 at 22:00

John · Accepted Answer · 2011-12-17 22:06:25Z

If you want to use the jQuery library, you can use this example I wrote. Its pretty daunting at first, but ill explain the best I can.

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var shownIds = new Array();

            setInterval(function(){
                $.get("test2.php", function(data){
                    data = $.parseJSON(data);

                    for(i = 0; i < data.length; i++){
                        if($.inArray(data[i]["id"], shownIds) == -1){
                            $("#log").append("id: " + data[i]["id"] + "<br />");
                            shownIds.push(data[i]["id"]);
                        }
                    }
                });
            }, 2000);
        });
    </script>
</head>
<body>
    <div id="log">

    </div>
</body>
</html>

test2.php

<?php
$result[0]["id"] = "id1";
$result[1]["id"] = "id2";

echo json_encode($result);
?>

So basically, it checks if the document is ready and everything is loaded. After that is makes a new array called shownIds. This variable will keep the id (primary index from your sql table) to make sure it doesn't show the same data twice. SetInterval just makes it call that function every two seconds. $.get this function gets the page source of test2.php which has the json data. It parses it with $.parseJSON and then loops through each. To make sure that no two rows are shown twice, it checks with $.inArray to see if the id is already in the shownIds array. If it isnt, it appends the data (just id for now) onto the only div. Then it pushes the id into the shownIds array so that it doesnt get shown again.

test2.php makes an array. Sets the ids, and echos the data in the json format (not needed but keeps it organized)

holy cow...thanks for your answer! Give me a second to go through it. :)

Amit Patil · Accepted Answer · 2011-12-17 22:00:14Z

1

Use jquery ajax http://api.jquery.com/jQuery.ajax/ its simple and easy and call ajax method after every second...so that after every second u will get new data.

answered Dec 17, 2011 at 22:00

Amit Patil

3,0876 gold badges47 silver badges62 bronze badges

Collectives™ on Stack Overflow

Real time database changes with Ajax

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related