CODEWITHSUNDEEP
phpjavascriptajaxdatabase
codedude
codedude

Reputation: 6519

Real time database changes with Ajax

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!

Upvotes: 2

Views: 9755

Answers (2)

John
John

Reputation: 6268

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)

Upvotes: 4

Amit Patil
Amit Patil

Reputation: 3067

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.

Upvotes: 1

Related Questions