IE: Changing the contents of your website on the fly with <DIV>
Say you want to change what is displayed on your page based on a user action or you want to change something on the fly for a long-executing process. An example would be the Microsoft Windows Update website with Win2k/XP - it's displaying it's progress as it searches for updates.
With IE, you can use a combination of Javascript and the <DIV> tag to do so.
Note that changing the page contents while the task is still being executed requires the use of the <CFFLUSH> tag - which makes that tag unavailable for CF 4.x and below. Due note that you can still use Javascript functions to update the contents of <div> tags but that limits you to only what can be done after the page generation is complete and the rendered HTML sent to the user.
For an example, let's say that you want to display to the user the percentage complete of the current task - as it's still being executed.
First, we need to "prime the pump" by displaying a div tag that we'll alter later. Note that you must have some text inside the div tag or you will not be able to update it (a Javascript error is generated).
Code:
<CFOUTPUT>
<div id="Audit">The current task is 0% complete.</div>
</CFOUTPUT>
Now updating the contents of that div tag is a breeze.
Code:
<script language="Javascript">
Audit.innerHTML='The current task is #Per#% complete.';
</script>
One thing to keep in mind is that the Javascript block is only executed after it receives the </script> tag.
Here's a Copy-n-Paste demo version. Note that I pad the output buffer with a lot of extra "x" characters inside an HTML comment block on line 2. This is because the CFFLUSH tag will not flush anything unless it has at least 1k of data to send. After the initial flush, you can flush the buffer any time you wish.
Code:
<CFOUTPUT>
<!-- #RepeatString("x",1024)# -->
<font face="Arial" size="4">
<div id="Audit">The current task is 0% complete.</div>
</font>
</CFOUTPUT>
<CFFLUSH>
<CFLOOP index="Per" from="1" to="100">
<CFOUTPUT>
<script language="Javascript">
Audit.innerHTML='The current task is #Per#% complete.';
</script>
</CFOUTPUT>
<CFFLUSH>
<!--- Insert a little delay --->
<CFLOOP index="loop" from="1" to="10000">
</CFLOOP>
</CFLOOP> Another method you could use is to update the value of a <div> block using Javascript timeouts.
Okay, let's say you want to change the text of a block if the user moves the mouse over it and restore it when they move the mouse off.
Code:
<font face="Arial" size="4">
<div onMouseOver="this.innerHTML='Hey, get <b>OFF</b> of me!'"
onMouseOut="this.innerHTML='I feel so lonely.'">I need a hug.</div>
</font> The above example shows the use of two Javascript events in order to change the contents of a <div> block - and also shows that you need to stay away from embedding HTML in the middle of your text. If you try the above example, you'll notice that it'll execute the onMouseOut event if you move your mouse cursor to the left or right of "OFF" where the bold tags reside and it won't execute the onMouseOver event until you move your mouse off of the text and then back on.
An important note - when changing the contents of a <div> tag, you are using Javascript - so be sure to escape your special characters with the backslash. Example, you can't display a backslash by just sending a backslash - you have to send TWO backslashes - the first one escapes the 2nd.
Quote:
Bad: Audit.innerHTML='Path C:\Windows\System32';
Good: Audit.innerHTML='Path C:\\Windows\\System32';
|