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