CODEWITHSUNDEEP
phpjavascriptmysqlajax
Worm
Worm

Reputation: 141

How to refresh a div everytime a database is updated?

I am trying to make a chat room on my website, I am using php and mysql to store the messages and all the info. How could I automatically refresh the page every time someone updates the database? example:

If I am on my site, the messages show up on my screen but I can only see more recent messages after I refresh the page. Is there a way to make it real-time?

Also I do not know much javascript/ajax/jquery or any of that. Any help is appreciated!

There will be low amount of traffic on my site. Probably around 10-15 people at a time, if that even.

Upvotes: 2

Views: 5765

Answers (7)

Winfield Trail
Winfield Trail

Reputation: 5695

You are going to need to learn AJAX in order to make this work well, and jQuery is probably the easiest way to do it. If we can assume that the DIV you want to update has the ID PonyRides, you would want to do:

$("#PonyRides").ajax({url: "/chat.php?getupdates=true"});

This will get the contents of chat.php and stick it into the #PonyRides DIV. This assumes that chat.php will get the contents of the database and format them into HTML.

The remaining challenge is to make it update whenever your database does, but the simplest way is just to reload the whole chat regardless of whether an update has been made or not.

That will impact performance, but if you have less than a hundred chatters you'll probably be fine. If you have more than that, you'd do well to sense inactivity and decrease the checking period, or only send updates instead of the whole chat. Those are more complicated topics, though, and you can build them in as needed once you get these basic concepts down.

To do this, simply wrap the ajax() call in an interval like so:

setInterval(function(){ //the following code runs repeatedly
    $("#PonyRides").ajax({url: "/chat.php?getupdates=true"});  //update our chat div
},5000); //repeat every five seconds

The other, awful method would be to load chat in an iFrame, set to reload periodically using the meta refresh technique. This would be dreadful, and can only be recommended if you are trying for some reason to support incredibly old browsers.

Upvotes: 2

Prashant Singh
Prashant Singh

Reputation: 3793

You can use AJAX request to update the values   

 <script type='text/javascript'>

    // function for making an object for making AJAX request

    function getXMLHTTPRequest() {
    try {
    req = new XMLHttpRequest();
    } catch(err1) {
    try {
    req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (err2) {
    try {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (err3) {
    req = false;
    }
    }
    }
    return req;
    }

    var http899 = getXMLHTTPRequest();
    function searchFabIndia() {

    var myurl = "http://my2nddomain.com/yebhi.php";
    myRand = parseInt(Math.random()*999999999999999);
    var modurl = myurl+"?rand="+myRand;
    http899.open("GET", modurl, true);
    http899.onreadystatechange = useHttpResponse899;
    http899.send(null);
    }

    function useHttpResponse899() {
    if (http899.readyState == 4) {
    if(http899.status == 200) {
     // do all processings with the obtained values / response here

   // after doing the stuff, call fn again after 30 s say

   setTimeout("searchFabIndia()", 30000);
    }
    }
    }

    </script>
<body onload='searchFabIndia();'>

Upvotes: 1

edocetirwi
edocetirwi

Reputation: 548

There must be something similar to SignalR(.net) for php. It lets you add code when an event occurs, I think that is what you are looking for.

Upvotes: -1

cereallarceny
cereallarceny

Reputation: 4983

I would suggest making an AJAX request to a file on your server which will update the database. If the update to the database is successful then return the message which was updated. Back on the client side you wait for the response and if you get one then append the message to the end of the content. This way you're loading all the messages every time (which would be expensive), you're only loading new messages.

Upvotes: 0

chadpeppers
chadpeppers

Reputation: 2057

This would be accomplished through ajax by calling a function and updating the div. I would not suggest making people refresh a page everytime they send a message it would get ugly. Another option would be using HTML5 web workers

http://msdn.microsoft.com/en-us/hh549259.aspx

Upvotes: 2

chantheman
chantheman

Reputation: 5296

You probably do not want to be reloading the page every time. My recommendation, and there are many ways to do this, is to make a ajax call every so often and check/pull the new information from the database.

I would research AJAX and do a tutorial.

Upvotes: 2

Dan F.
Dan F.

Reputation: 1363

Your best bet is to make an AJAX request every sec or so and see if there are new messages.

Upvotes: 3

Related Questions