PDA

Click to See Complete Forum and Search --> : Is there a way to do hidden IFRAMEs?

Doug_Dyer
11-25-2002, 04:10 PM
A little background:
I have a page that has certain database items represented in IFRAMEs (one per item) that are reloaded at a periodic rate (say, once every 5 seconds). These "database items" represent a database at the server and we wish to monitor these items as they change in real time without having to reload the entire page. Therefore the reload "pulls" new values onto the screen without having to reload the entire page.

The question:
The flicker is very noticable, so I thought Id look into a way to have a hidden IFRAME and a visible INPUT type and just have the refreshing done off-screen, then javascript can compare the values and if they have changed, assign the new value to the visible INPUT item.

Is there a way to create hidden IFRAMEs? I have IE6 , so layers are out.

Thanks in advance,
Doug
Rick Bull
11-25-2002, 04:58 PM
Try <iframe style="display:none;">
Vladdy
11-25-2002, 05:55 PM
if you use display = none the whole page will be jumping around as the iframe is being removed form the flow and put back in.
How much data are you talking about (fields?)
I would go with dynamic script instead of an iframe.
Stefan
11-25-2002, 09:04 PM
Originally posted by Vladdy
if you use display = none the whole page will be jumping around as the iframe is being removed form the flow and put back in.


But why would he want to put the iframe back in? :confused:
And if needed, he could still use CSS, just {visibility:hidden} instead.
Doug_Dyer
11-26-2002, 06:36 AM
I just put <IFRAME ..... height=0 width=0> and it works with no side effects.

I thought for sure Id at least see some artifact but IE does let you do it.
Vladdy
11-26-2002, 07:09 AM
If you are not using IFRAMEs to display the returned content, why use them at all:confused: :confused: :confused:
Doug_Dyer
11-26-2002, 07:32 AM
Originally posted by Vladdy
If you are not using IFRAMEs to display the returned content, why use them at all:confused: :confused: :confused:

To reload data from the server without annoying flicker. As I have been able to figure out, there is no way for javascript to reload select information from the server, so I put it in hidden IFRAMEs and reload them at periodic intervals (hidden because the reload would cause visual flicker).

Then my javascript does a diff on the values of the visible and hidden input pairs and updates the visible one on change. No flicker because the update occurs within javascript as an assignment and is not a clean reload of the frame.

Is there a better way? I've plowed over books recently and they seem to concur that js cannot communicate with the server. This is like my first JS project ever so Im very green to the client-side stuff. This is the best thing I could think of.
Vladdy
11-26-2002, 08:10 AM
books-shmooks:rolleyes:

Something like this goes on your HTML page:

...
<script>
fields = new Array(0,0....0);
fieldIDs = newArray('Field1','Field2',....,'FieldN');

scriptNode = null;

function getUpdate()
{ scriptNode=document.createElement('script');
scriptNode.type='text/javascript';
script.src = 'http://www.yourweb.com/serverscript.asp';
document.getElementsByTagName('head')[0].appendChild(scriptNode);
return;
}

function updateFields()
{ for(i=0;i<fields.length; i++)
{ if(fields[i]!=newfields[i])
document.getElementById(fieldIDs[i]).firstChild.nodeValue = newfields[i];
}
document.getElementsByTagName('head')[0].removeNode(scriptNode);
}
</script>
....
<p id="Field1">Field 1 Value goes here</p>
.....
<p id="Field2">Field 2 Value goes here</p>
....


Have your server script construct a js file that would have new values in newfields array and call updateFields() function at the end. The output should look like:

newfields = new Array(12,134,23,....123);
updateFields();
Doug_Dyer
11-26-2002, 09:00 AM
Hey thats pretty cool :) And this solution isn't tied to IEs IFRAME. I tried it and on the second update I get a page error, it dies on the appendChild bit in getupdate.

Any ideas?


<HEAD>
<script language="JavaScript">
fields = new Array(0,0,0);
fieldIDs = new Array('Field1','Field2','Field3');

scriptNode = null;

function getUpdate()
{
scriptNode=document.createElement('script');

scriptNode.type='text/javascript';
scriptNode.src = 'newwaysource.htm';

document.getElementsByTagName('head')[0].appendChild(scriptNode);

return;
}

function updateFields()
{
for(i=0;i<fields.length; i++) {

if(fields[i] != newfields[i]) {
var element = document.getElementById(fieldIDs[i]);

if (element.type)
element.value = newfields[i];
else
element.firstChild.nodeValue = newfields[i];
}
}

document.getElementsByTagName('head')[0].removeNode(scriptNode);
}
</script>
</HEAD>

<FORM>
<p id="Field1">Field 1 Value goes here</p>
<p id="Field2">Field 2 Value goes here</p>
<INPUT TYPE="TEXT" id="Field3">

<INPUT TYPE="BUTTON" onclick="getUpdate();" value="UPDATE">
</FORM>





My "input" file:


newfields = new Array(122,134, 'dork');
updateFields();
Doug_Dyer
11-26-2002, 09:50 AM
I got it.... the updateFields routine removes the childnode off of 'head' but it should be 'script'. This makes it work every time, but its confusing:

Why is the following code working? Do you think there isn't some weirdness when I delete the child off of the script element that was created?


creation
scriptNode=document.createElement('script');
document.getElementsByTagName('head')[0].appendChild(scriptNode);


deletion
document.getElementsByTagName('script')[0].removeNode(scriptNode);
Vladdy
11-26-2002, 10:20 AM
Sorry, my screw up - it was too early in the morning to think straight:
My idea was to delete the script node after it was executed (otherwise you will keep accumulating script nodes in your <head> ;) ).
However I put the deletion part in not a very good point and used the wrong function :o
Here is the improved (and tested this time) script


<html>
<head>
<title>Test Dynamic Update</title>
<script type='text/javascript'>
fields = new Array(0,0,0);
fieldIDs = new Array('Field1','Field2','Field3');

scriptNode = null;

updateNumber = 0;

function getUpdate()
{ dhead = document.getElementsByTagName('head')[0];
if(scriptNode) dhead.removeChild(scriptNode);
scriptNode=document.createElement('script');
scriptNode.type='text/javascript';
scriptNode.src = 'newwaysource.htm';
dhead.appendChild(scriptNode);
return;
}

function updateFields()
{ for(i=0;i<fields.length; i++)
{ if(fields[i] != newfields[i])
{ var element = document.getElementById(fieldIDs[i]);
if (element.type) element.value = newfields[i];
else element.firstChild.nodeValue = newfields[i];
}
}
updateNumber++;
document.getElementById('un').firstChild.nodeValue = updateNumber;
}
</script>
</HEAD>
<body>
<FORM>
<p>Number of updates: <span id="un">0</span> </p>
<p id="Field1">Field 1 Value goes here</p>
<p id="Field2">Field 2 Value goes here</p>
<INPUT TYPE="TEXT" id="Field3">

<INPUT TYPE="BUTTON" onclick="getUpdate();" value="UPDATE">
</FORM>
</body>
</html>


I put the number of updates ticker just for the testing purposes. When you have it debuged and ready to put on a timer, use
<body onload="setInterval('getUpdate()',5000)">
Doug_Dyer
11-26-2002, 10:42 AM
Many thanks!

That makes more sense, and you used <span>, which was a new one to me. Very cool.
Sangit
09-13-2005, 07:54 PM
the solution works fine in firefox etc.
unfortunately it does not in safari, it only shows the values for the first update, then the values dont change any more
does anyone know why?