Flickering while updation of Table using the XML tag flickers

V

vanisathish

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

RobG

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..
Click to expand...

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.

below is my html page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language=Javascript>
Click to expand...

Language is depreciated, type is required:

var xmlDso;
function go()
{

//eval('xmlDso=dsobook.XMLDocument');
eval('xmlDso=dsobook.XMLDocument');
Click to expand...

There is almost never a need for eval, just don't use it.

var xmlDso=dsobook.XMLDocument;
xmlDso.load("operlayout_ticker.xml");
Click to expand...

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>
Click to expand...

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>
Click to expand...

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

[...]
 
V

vanisathish

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>
Click to expand...

Thanks
Vanitha
 
R

RobG

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;




Thanks
Vanitha
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Having trouble centering contents of td ? 3
Filter table rows based on multiple checkboxes value 2
SendGrid email issue in responsive Gmail 1
Can anyone please help? HTML - two tables applying different styles 4
How to delete the item from table? I am using SESSION. 0
Image shifts to the right when export the page to pdf 4
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7

Members online

Total: 30 (members: 3, guests: 27)
Robots: 476

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,053
Latest member
BrodieSola

Latest Threads

Top