Hi,
Well, I decided to go for the server push method, because :
- it seemed to work and was simple to do
- er, no second reason ...
This is what I did, I created an empty div, then filled it with more little div boxes for each thing in the loop. Also I put a span in for a textual N / M status.
All on the fly, using JavaScript innerHtml to change elements on the page, just by sending the JavaScript command to the browser.
Seemed to work!
Note that I used =+ to add innerHTML boxes to existing boxes.
main_prog.cgi :
print header;
... etc ...
# Print a div box with a span element to fill in with later JavaScript
+ commands.
#
print "<div id=\"Progress\" class=\"box_div\"> " .
" <i>Progress on things </i> : " .
" <span id=\"meter\"></span> " .
"</div>\n";
...
# Loop the loop
#
my $max_things = scalar (@things);
my $thing_index = 0;
foreach my $thing (@things) {
$thing_index++;
...
# Print the current thing into the span meter.
#
print <<_EOT_;
<script language=JavaScript type=text/javascript><!--
document.getElementById('meter').innerHTML ='$thing_index of $max_
+things';
//--></script>
_EOT_
# Do the things ...
...
if ($status eq "excellent") {
# Add a small div box with the thing and a tick
# image to the main div box - its all floated
# left so will fill up nicely.
#
print <<_EOT_;
<script language=JavaScript type=text/javascript><!--
document.getElementById('Progress').innerHTML+='<div class=\"div_o
+k\">Thing $thing_index is excellent<img src=/img/tick.png width=\"10\
+" height=\"10\
"></div>';
//--></script>
_EOT_
} else {
<script language=JavaScript type=text/javascript><!--
document.getElementById('Progress').innerHTML+='<div class=\"div_n
+otok\">Thing $thing_index is v. bad<img src=/img/cross.png width=\"10
+\" height=\"10\
"></div>';
//--></script>
_EOT_
} # endif excellent
} # end foreach thing
The CSS was :
div.box_div {
border: thin solid #000000;
padding:5px;
margin:9px;
color:#0088FF;
width:75%;
float:left;
}
div.div_ok {
border: thin solid #0088FF;
padding:2px;
margin:2px;
color:#0088FF;
float:left;
}
div.div_notok {
border: thin solid #FF0000;
padding:2px;
margin:2px;
color:#FF0000;
float:left;
}
</style>
So it seems the trick was just to send JavaScript commands to the browser from the Perl CGI.
Not ideal, but seemed to work for IE6 and FF3. Ymmv etc ;)
Hope that's useful for someone.
Cheers,
Caesura
-
Are you posting in the right place? Check out Where do I post X? to know for sure.
-
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big>
<blockquote> <br /> <dd>
<dl> <dt> <em> <font>
<h1> <h2> <h3> <h4>
<h5> <h6> <hr /> <i>
<li> <nbsp> <ol> <p>
<small> <strike> <strong>
<sub> <sup> <table>
<td> <th> <tr> <tt>
<u> <ul>
-
Snippets of code should be wrapped in
<code> tags not
<pre> tags. In fact, <pre>
tags should generally be avoided. If they must
be used, extreme care should be
taken to ensure that their contents do not
have long lines (<70 chars), in order to prevent
horizontal scrolling (and possible janitor
intervention).
-
Want more info? How to link
or How to display code and escape characters
are good places to start.