Thursday, August 12, 2010

PHP : Ajax : Refresh partially without refresh entire page

1. Show alert after 10 seconds with ajax setInterval function

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script language="JavaScript">
setInterval( "alert('Hello World')", 10000 );
</script>


2. Update your contents after 5 seconds with ajax setInterval function

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script language="JavaScript">
setInterval( "hello();", 5000 ); ///////// 5 seconds

$(function() {
hello = function(){
$('#dataDisplay').prepend("Hi This is auto refresh example<br><br>").fadeIn("slow");
}
});
</script>


3. Refresh div when insert database row


Ajax JQuery / PHP – Refresh Table Demo
Download Ajax JQuery / PHP – Refresh Table

Refer link:
http://www.w3cgallery.com/
http://www.brightcherry.co.uk

4 comments:

  1. Thanks for the examples, very useful! Still I've a question. As soon as I apply an auto-refresh to the third example (auto-refreshing data.php at a 5 second interval), the complete table is rebuild over and over again. What would be a good solution for only refreshing the data retrieved from the database? (i.e. a table is build on forehand with 5 rows, and would only show the last 5 entries) Thanks and keep up the good work!

    ReplyDelete
  2. Thanks for the comment. As the example 3 is showing first 20 entries, thus, if only show last 5 entries, it should like this:

    $sql = "SELECT * FROM table_refresh
    ORDER BY uniqueid DESC
    LIMIT 5";

    Hope it helps.

    ReplyDelete
  3. That indeed shows the last 5 entries, thanks. However I try to figure a way to only refresh a specific "cell" (for example B2 or C3) within the table. Thus not rebuilding the whole table.

    |-----|-----|-----|
    |A1 |A2 |A3 |
    |-----|-----|-----|
    |B1 |B2 |B3 |
    |-----|-----|-----|
    |C1 |C2 |C3 |
    |-----|-----|-----|

    Maybe it's to complex or simply not possible since the table is created via a loop.

    Thanks again for the post, keep it up!

    ReplyDelete
  4. It sounds like an edit form. After click submit form, the updated data show directly at the <div id="showdata"></div>, am I right?

    If it is, is it possible replace the form to 'edit' form instead of 'create new' form, and replace the INSERT sql query to UPDATE query?

    ReplyDelete