http://qs321.pair.com?node_id=796970


in reply to Re: CGI javascript AJAX - progress in real time on a web page.
in thread CGI javascript AJAX - progress in real time on a web page.

Thanks Bloodnok, my node-title-creating skills are not the same as my search-term-forming skills, obviously!

That example, though, that you found seems to have this : 
print '<header>'; # placeholder for your whole HTML header block
print '<span id=Progress>Working...</span>';
print '<footer>'; # placeholder for the rest of your document until bu
+t without </body>

[download]

I'm not sure what the header and footer tags are here, and still the web page is incomplete until the process finishes and the browser gets its </body></html> tags.

I noted this Watching long processes through CGI Aug02 which runs a bg process to do the work, but stopping the browser lets it go on, I'd rather not have that. And he bangs on about "server push" which is what I'm already doing (just printing the progress to the screen after the html headers), and the browser/server probs that could have.

Looks like I'm stuck with :
Is there not a way to print a whole web page then update elements of it like Ajax does?

Thanks much for the help!

Caesura

Replies are listed 'Best First'.
Re^3: CGI javascript AJAX - progress in real time on a web page.
by Bloodnok (Vicar) on Sep 23, 2009 at 14:13 UTC
    I have to admit that I searched for 'CGI' & 'progress' - I completely overlooked the prime requirement i.e. _browser_ progress reporting, so the server push probably ought not to be a surprise.

    As to your supplementary question, 'tis a good guestion well asked !! :-D

    If you are fortunate enough to find/develop a solution, please be sure to enlighten some/all of the monks by posting it [the solution] here (on the monastry) - esp. if it's a perl based solution.

    A user level that continues to overstate my experience :-))
[reply]
[reply]
Re^3: CGI javascript AJAX - progress in real time on a web page.
by Anonymous Monk on Sep 24, 2009 at 02:42 UTC
    Is there not a way to print a whole web page then update elements of it like Ajax does?

    Yes, it is called AJAX, and there is no ajax without javascript.

[reply]
      Hi, Well, I decided to go for the server push method, because :
      1. it seemed to work and was simple to do
      2. 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

      [download]

      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>

      [download]
      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
[reply]
[d/l]
[select]

In Section Seekers of Perl Wisdom