Forum Moderators: open
I'm new here (my first post). The problem i have is that I want to update the body of my web page say every 10 seconds without having to reload the page i.e. no flickers. I just want any part of the page that has changed e.g. a table connected to a database to show the current data without the users clicking anything i.e. it should be automatic, using a particular time interval like I mentioned.
PLEASE HELP ME!
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script type="text/javascript">
function change()
{
content = document.getElementById("Refreshableregion");
settimeout('change()', 2000);
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout" onload="change();">
<form id="Form1" method="post" runat="server">
<div class="body">
<div id="Refreshableregion">
<asp:DataList id="DataList1" runat="server" Height="128px">
<ItemTemplate>
<b>
<%# DataBinder.Eval(Container.DataItem, "Title") %>
</b>
<%# DataBinder.Eval(Container.DataItem, "Body") %>
</ItemTemplate>
<AlternatingItemTemplate>
</AlternatingItemTemplate>
</asp:DataList>
</div>
</div>
</form>
</body>
Here's a simple example that uses the Yahoo UI Library's connection manager to handle the AJAX requests. Note, my page is a PHP page 'scheduledajax.php'. All it does it update every few seconds and displays the date from the server.
<?php
// Error Handling
ini_set('display_errors',1);
error_reporting(E_ALL & ~E_NOTICE);
// BACKEND
if( isset($_GET['ajax']) ) {
echo date('l dS \of F Y h:i:s A');
exit();
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Scheduled AJAX Example</title>
<script type="text/javascript" src="/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/yui/build/connection/connection-min.js"></script>
<script type="text/javascript">
// My namespace (to avoid conflicts with global variables)
FOTI = window.FOTI ¦¦ {};
// My page specific object
FOTI.ScheduledAjaxExample = function() {
return {
/**
* (psuedo) Private method for connecting.
*/
_connect : function(method,uri,callback,postdata){
YAHOO.util.Connect.asyncRequest(method,uri,callback,postdata);
},
/**
* Node used to store the results
*/
resultsNode : null,
/**
* A counter, just for testing
*/
counter : 0,
/**
* Initialization method
*/
init : function(e) {
// Get the results node
FOTI.ScheduledAjaxExample.resultsNode = YAHOO.util.Dom.get('results');
if( FOTI.ScheduledAjaxExample.resultsNode!= null ) {
// Start the schedule
setTimeout( FOTI.ScheduledAjaxExample.connect, 3000 );
}
},
/**
* Connect to server
*/
connect : function() {
// AJAX connection stuff goes here
var uri = 'scheduledajax.php?ajax=true&nocache=' + (new Date()).getTime();
var timeout = 2; // seconds
var callback = {
success : function(o){
FOTI.ScheduledAjaxExample.resultsNode.innerHTML = "<div>" + (FOTI.ScheduledAjaxExample.counter++) + " : " + o.responseText + "</div>";
setTimeout( FOTI.ScheduledAjaxExample.connect, 3000 );
},
failure : function(){
alert('Connection failed');
},
timeout : timeout * 1000
};
FOTI.ScheduledAjaxExample._connect('GET', uri, callback, null );
}
};
}();
// Fire my methods once the page loads
YAHOO.util.Event.on(window,'load',FOTI.ScheduledAjaxExample.init);
</script>
</head>
<body>
<div id="results">
When the update occurs, the results will be listed here.
</div>
</body>
</html>
