By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,483 Members | 1,727 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,483 IT Pros & Developers. It's quick & easy.

Flickering while updation of Table using the XML tag flickers

P: n/a
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..

below is my html page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language=Javascript>
var xmlDso;
function go()
{

//eval('xmlDso=dsobook.XMLDocument');
eval('xmlDso=dsobook.XMLDocument');
xmlDso.load("operlayout_ticker.xml");

setTimeout('go();',2000);

}
</script>
</HEAD>

<BODY >
<object id="dsobook"
CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0"
height="0"></object>
<div style="position: absolute; top: 60;
left:15;height:100;width:300;z-index=-1">
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111"
style="border-collapse: collapse" width="99%" datasrc="#dsobook"
datafld="ACU">
<tr>
<td>
<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>
<tr>
<td width="8%" bgcolor="#FFFFFF" align="center">
<font face="Arial" size="1">TrackingMode</font></td>
<td width="105%" bgcolor="#FFFFFF" align="center">
<font face="Arial" size="1"><span
datafld="TrackingMode"></span></font></td>
</tr>
<tr>
<td width="45%" bgcolor="#FFFFFF" align="center">
<font face="Arial" size="1">Submode</font></td>
<td width="31%" bgcolor="#FFFFFF" align="center">
<font face="Arial" size="1"><span
datafld="Submode"></span></font></td>
</tr>
<tr>
<td width="45%" bgcolor="#FFFFFF" align="center">
<font face="Arial" size="1">CurrentTarget</font></td>
<td width="31%" bgcolor="#FFFFFF" align="center">
<font face="Arial" size="1"><span
datafld="CurrentTarget"></span></font></td>
</tr>

</table>

</td></tr></table>
</td>
</tr>
</table>
</div>
</BODY>

<script language="JavaScript">
new go();
</script>
</HTML>

And the XML file is:
<?xml version="1.0" ?>
<Operation>
<ACU>
<Eq1>
<DevStatus TrackingMode="Move To Nominal Longitude" Submode="Holding
Target Postion" CurrentTarget="1" Console="Supervisor" Azimuth="94.85
degrees" Elevation="4.85 degrees" Polarization="-6.8 degrees"
SignalLevel="-16.0dB" />
<AlarmState CurrentState="1" />
</Eq1>
</ACU>
</Operation>

Sep 26 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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
Sep 26 '05 #2

P: n/a
Hello,

Mnay Thanks for your replies. I have now removed the dynamic binding
concept. The reason why i like the dynamic binding approach is that i
dont have to do any extra coding...
The reason why i gave these elements as attributes is, i will have N-
Number of Equipments, and i need to repeat all these parameters for the
N-Equipments of the same type. I thought by putting as attributes will
make the xml file more readable when i have N-DeviceType and each
device type having N-Equipments.

Now the doubt i have is there a way to represent the table elements by
TableName.ElementName. What is the standard way of doing this. For ex,i
will have the TrackingMode Field for Eq1, Eq2 etc...In that case how i
do i decode those elements from javascript without creating a unique
tagName for each equipment viz. Eq1TrackingMode, Eq2TrackingMode etc.,

if ((n=document.getElementById(x.tagName))){
n.innerHTML = x.firstChild.data;
\ <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>


Thanks
Vanitha

Sep 27 '05 #3

P: n/a
va*********@gmail.com wrote:
Hello,

Mnay Thanks for your replies. I have now removed the dynamic binding
concept. The reason why i like the dynamic binding approach is that i
dont have to do any extra coding...
The reason why i gave these elements as attributes is, i will have N-
Number of Equipments, and i need to repeat all these parameters for the
N-Equipments of the same type. I thought by putting as attributes will
make the xml file more readable when i have N-DeviceType and each
device type having N-Equipments.

Now the doubt i have is there a way to represent the table elements by
TableName.ElementName. What is the standard way of doing this. For ex,i
will have the TrackingMode Field for Eq1, Eq2 etc...In that case how i
do i decode those elements from javascript without creating a unique
tagName for each equipment viz. Eq1TrackingMode, Eq2TrackingMode etc.,

if ((n=document.getElementById(x.tagName))){
n.innerHTML = x.firstChild.data;

\ <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>

Thanks
Vanitha


You need to read your XML file and create objects, then have each object
ether display itself or give it to a function that knows how to display it.

Look at either JSON or AJAX or write your own custom XMLHttpRequest.

Incidentally, using 'Eq1' is not very good as the '1' (one) character
looks very much like 'l' (lower case L).

If you have multiple 'Eq' elements, give them a unique name or id:

<Eq1>
<id>Eq-1</id>
<DevStatus>
<TrackingMode>Move To Nominal Longitude</TrackingMode>
<Submode>Holding Target Position</Submode>
...
</Eq1>
<Eq1>
<id>Eq-2</id>
<DevStatus>
...

then you can create an element in your page with an id that matches the
name. You should give each eq element a unique ID anyway to make them
easier to identify.

How you display the values of the other attributes is up to you, you
could generate compound id's like Eq-2_TrackingMode, but that may get a
little clumsy.


--
Rob
Sep 27 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.