Beefy Boxes and Bandwidth Generously Provided by pair Networks
Your skill will accomplish
what the force of many cannot
 
PerlMonks  

Re^3: CGI javascript AJAX - progress in real time on a web page.

by Anonymous Monk
on Sep 24, 2009 at 02:42 UTC ( [id://797114]=note: print w/replies, xml ) Need Help??


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

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.

  • Comment on Re^3: CGI javascript AJAX - progress in real time on a web page.

Replies are listed 'Best First'.
Re^4: CGI javascript AJAX - progress in real time on a web page.
by Caesura (Sexton) on Sep 28, 2009 at 15:54 UTC
    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

    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

Log In?
Username:
Password:

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: note [id://797114]
help
Chatterbox?
and the web crawler heard nothing...

How do I use this?Last hourOther CB clients
Other Users?
Others admiring the Monastery: (7)
As of 2025-06-19 09:52 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    No recent polls found

    Notices?
    erzuuliAnonymous Monks are no longer allowed to use Super Search, due to an excessive use of this resource by robots.