va*********@gmail.com wrote:
Hi
I am running a client side javascript timer to periodically refresh the
contents of some tables in the HTML page. The table values are
dynmically binded from XML DOM object using the <XML tag in HTML>. The
data is getting updated properly. but whenever the value is refreshed,
the HTML page flickers. How do i avoid this flickering..
I don't think you can, it seems to be a 'feature' of how IE updates
using the method you've employed. It is only marginally better than
using something like <META HTTP-EQUIV="Refresh" CONTENT="02"> and
changing the source HTML file. Your method is also IE-only and is
unlikely to work in other browsers (it doesn't work in Firefox).
You'd be much better off using JSON or XMLhttpRequest or similar. A few
hints below.
<URL:http://www.crockford.com/JSON/index.html>
below is my html page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language=Javascript>
Language is depreciated, type is required:
<script type="text/javascript">
var xmlDso;
function go()
{
//eval('xmlDso=dsobook.XMLDocument');
eval('xmlDso=dsobook.XMLDocument');
There is almost never a need for eval, just don't use it.
var xmlDso=dsobook.XMLDocument;
xmlDso.load("operlayout_ticker.xml");
The format of your XML file is essentially name/value pairs. You'd be
better off using JSON or similar, a different layout is given below that
works more widely as it makes the values available as the content of
elements rather than the attributes of a single element.
[...] <table border="0" cellpadding="0" cellspacing="0"
bordercolor="#111111" style="border-collapse: collapse" width="99%"
datasrc="#dsobook" datafld="Eq1">
<tr><td>
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#111111" style="border-collapse: collapse" width="99%"
datasrc="#dsobook" datafld="Devstatus">
<tr>
<td width="113%" bgcolor="#FFFFFF" align="center" colspan="2">
<b><font face="Arial" size="1">ACU Parameters</font></b></td>
</tr>
All of that style stuff embedded in the HTML can be replaced with CSS to
hugely reduce the size of your HTML file.
[...]
</table>
</div>
</BODY>
<script language="JavaScript">
new go();
</script>
</HTML>
That is invalid HTML - script elements can only appear in the head or
body, not between the end of the body and the closing HTML tag. I
presume browser error-correction comes into play here and moves the
script element back into the body.
Below is a script that will work in both IE and Firefox. I still has
your original stuff in it (cleaned up) plus a second table with a manual
update using DOM. You could automate it the same way as the go()
function is run using setTimeout.
The HTML does not validate, but if you remove all IE specific stuff it will.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> xml play</title>
<style type="text/css">
body {
font-family: arial, sans-serif;
font-size: 90%;
}
table {
border-collapse: collapse;
border-top: 1px solid #666666;
border-left: 1px solid #666666;
width: 99%;
}
td {
text-align: center;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
width: 50%;
}
</style>
<script type="text/javascript">
var xmlDso;
function go()
{
xmlDso=dsobook.XMLDocument;
xmlDso.load("operlayout_ticker.xml");
setTimeout('go();',2000);
}
/* Here is the generic parse & play method */
var oLoadedXML;
function loadXML(sImportXML)
{
if( window.ActiveXObject && /Win/.test(navigator.userAgent) ) {
oLoadedXML = new ActiveXObject("Msxml.DOMDocument");
oLoadedXML.async = false;
oLoadedXML.onreadystatechange = function () {
if (oLoadedXML.readyState == 4) parseXML();
}
oLoadedXML.load(sImportXML);
} else if( document.implementation
&& document.implementation.createDocument ) {
oLoadedXML = document.implementation.createDocument("","",null) ;
oLoadedXML.async=false;
var loaded = oLoadedXML.load(sImportXML);
if (loaded) {
parseXML();
}
} else {
alert("Your browser can\'t handle this script");
return;
}
}
function parseXML()
{
var devStatus = oLoadedXML.getElementsByTagName("DevStatus")[0];
var x, n, i, j = devStatus.childNodes.length;
for (i=0; i<j; i++){
x = devStatus.childNodes[i];
if ( x.tagName && x.firstChild ) {
if ((n=document.getElementById(x.tagName))){
n.innerHTML = x.firstChild.data;
}
}
}
}
</script>
</head>
<body onload="go();">
<object id="dsobook"
CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<table datasrc="#dsobook" datafld="ACU">
<tr>
<td>
<table datasrc="#dsobook" datafld="Eq1">
<tr>
<td>
<table datasrc="#dsobook" datafld="Devstatus">
<tr>
<td colspan="2"><b>ACU Parameters</b></td>
</tr>
<tr>
<td>TrackingMode</td>
<td><span datafld="TrackingMode"></span></td>
</tr>
<tr>
<td>Submode</td>
<td><span datafld="Submode"></span></td>
</tr>
<tr>
<td>CurrentTarget</td>
<td><span datafld="CurrentTarget"></span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- New table -->
<table>
<tr>
<td colspan="2"><b>ACU Parameters</b></td>
</tr>
<tr>
<td>TrackingMode</td>
<td><span id="TrackingMode"></span></td>
</tr>
<tr>
<td>Submode</td>
<td><span id="Submode"></span></td>
</tr>
<tr>
<td>CurrentTarget</td>
<td><span id="CurrentTarget"></span></td>
</tr>
</table>
<input type="button" value="Update using DOM" onclick="
loadXML('operlayout_ticker.xml');
">
</body>
</html>
And the modified XML file (which still works with your original version)
'operlayout_ticker.xml' is:
<?xml version="1.0" ?>
<Operation>
<ACU>
<Eq1>
<DevStatus>
<TrackingMode>Move To Nominal Longitude</TrackingMode>
<Submode>Holding Target Postion</Submode>
<CurrentTarget>100</CurrentTarget>
<Console>Supervisor</Console>
<Azimuth>94.85 degrees</Azimuth>
<Elevation>4.85 degrees</Elevation>
<Polarization>-6.8 degrees</Polarization>
<SignalLevel>-16.0dB</SignalLevel>
</DevStatus>
<AlarmState>
<CurrentState>1</CurrentState>
</AlarmState>
</Eq1>
</ACU>
</Operation>
[...]
--
Rob
