auto reload: how it works?

Question

i need to change something in my site, if some fields changed in database, but without reloading the page! but i have no idea how i can do it. could you give me an idea? thanks

example:

for example, i have a forum, and i need to show a image, if new comment resieved! i can write all functions, but i don't understand when i must call the function? maybe window.onload?

Answer 1

Ajax

Once you've familiarized yourself with the concept, you can reference the jQuery AJAX documentation for information on how to implement it with jQuery.

Answer 2

Then you need AJAX!

Explanation:

You need two pages, the main page which does not "reload". And a second one which returns two versions of the small image based on the database field.

Page one has this JavaScript in it:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">

/* normal ajax without periodical refresh
$.ajax({
  url: 'page2.php',
  success: function(data) {
    $('#database_status').html(data);
  }
});
*/

var refreshId = setInterval(function() {
     $('#database_status').load('/path/to/your.php');
}, 3000);
</script>

// Or you use the jQuery plugin Heartbeat: http://www.jasons-toolbox.com/JHeartbeat/ 

And a div <div id="database_status">empty</div>

The second page, returns a image tag based on the database setting for example in PHP:

<?php
// do db request 
if ($request) {
    echo '<img src="true.gif"> TRUE';
} else {
    echo '<img src="false.gif"> FALSE';
}

Answer 3

http://en.wikipedia.org/wiki/Ajax_(programming)

Answer 4

The easiest way to perform an ajax request with jquery is the load method. On that page you can also see plenty of examples.

Answer 5

There are two basic approaches you can take:

1. Use setInterval to make an Ajax request periodically that ask the server if there are any updates.
2. Use Comet to fake server push

Answer 6

You can use jQuerys load- or JSON-method to get data from your server.

In your case the following scenario is possible:

1. The site loads.
2. Your JavaScript loads the initial data from the server.
3. Now, every couple of seconds or minutes (Depending on your use case), the JavaScript asks the server if anything changed since it last asked (Use timestamps in your request, for example).
4. If so, change the website accordingly.
5. Goto 3.

Please keep in mind that excessive polling might but enormous strains on your server, especially if you have a lot of users. Long-polling or Comet are advanced techniques to handle the load.

Answer 7

Try Ajax, e.g: using jquery which allows you to handle those in a high level js. example in this site when you do the send email