annotate scripts/pjx_loading.pl @ 9:9652dc713ba6 boosterpack

working on adding to rlmcintyre.com
author Robert McIntyre <rlm@mit.edu>
date Sat, 26 Jun 2010 20:06:08 -0400
parents 477258d09353
children
rev   line source
robert@0 1 #!C:/strawberry/perl/bin/perl.exe
robert@0 2
robert@0 3 use strict;
robert@0 4 use CGI::Ajax;
robert@0 5 use CGI;
robert@0 6
robert@0 7 my $func = sub {
robert@0 8 my $input = shift;
robert@0 9 my $i=6000000;
robert@0 10 while($i--){ }
robert@0 11 return "got input: $input " . 'done';
robert@0 12 };
robert@0 13
robert@0 14
robert@0 15 sub Show_HTML {
robert@0 16 my $html = <<EOT;
robert@0 17
robert@0 18 <html>
robert@0 19 <head><title>CGI::Ajax Example</title>
robert@0 20
robert@0 21 <script type=text/javascript>
robert@0 22 // these 2 functions provide access to the javascript events. Since
robert@0 23 // is an object anything here will apply to any div that uses a
robert@0 24 // cgi::ajx registered function. as a convenience, we send in the id
robert@0 25 // of the current element (el) below. but that can also be accessed
robert@0 26 // this.target;
robert@0 27 // if these are not defined, no problem...
robert@0 28 pjx.prototype.pjxInitialized = function(el){
robert@0 29 document.getElementById(el).innerHTML = 'Loading';
robert@0 30 document.getElementById(el).style.backgroundColor = '#ccc';
robert@0 31 }
robert@0 32
robert@0 33 pjx.prototype.pjxCompleted = function(el){
robert@0 34 // here we use this.target:
robert@0 35 // since this is a prototype function, we have access to all of hte
robert@0 36 // pjx obejct properties.
robert@0 37 document.getElementById(this.target).style.backgroundColor = '#fff';
robert@0 38 }
robert@0 39
robert@0 40 </script>
robert@0 41 </head>
robert@0 42 <body>
robert@0 43 <form>
robert@0 44 Enter Something:&nbsp;
robert@0 45 <input type="text" name="val1" id="val1" size="6" onkeyup="jsfunc( ['val1'], 'result' ); return true;"><br>
robert@0 46 Enter Something:&nbsp;
robert@0 47 <input type="text" name="val2" id="val2" size="6" onkeyup="jsfunc( ['val2'], 'another' ); return true;"><br>
robert@0 48 <hr>
robert@0 49 <div id="result" style="border: 1px solid black;
robert@0 50 width: 440px; height: 80px; overflow: auto">
robert@0 51 </div>
robert@0 52
robert@0 53 <div id="another" style="border: 1px solid black;
robert@0 54 width: 440px; height: 80px; overflow: auto">
robert@0 55 </div>
robert@0 56 </form>
robert@0 57 </body>
robert@0 58 </html>
robert@0 59
robert@0 60 EOT
robert@0 61
robert@0 62 }
robert@0 63
robert@0 64 my $cgi = new CGI(); # create a new CGI object
robert@0 65 my $pjx = new CGI::Ajax( 'jsfunc' => $func );
robert@0 66 print $pjx->build_html($cgi,\&Show_HTML);