|
rlm@0
|
1 #!C:/strawberry/perl/bin/perl.exe
|
|
rlm@0
|
2
|
|
rlm@0
|
3 # CGI-Ajax: example script 'pjx_combo.pl'
|
|
rlm@0
|
4 #
|
|
rlm@0
|
5 # INSTALL: place in an apache location that can execute perl scripts
|
|
rlm@0
|
6 #
|
|
rlm@0
|
7 # this script demonstrates a set of dynamic select boxes, where the
|
|
rlm@0
|
8 # selection in a box changes other select box contents, or html div
|
|
rlm@0
|
9 # values. The data in each select box comes from the data anonymous
|
|
rlm@0
|
10 # hash, but could just as easily come from a database connection, etc.
|
|
rlm@0
|
11 #
|
|
rlm@0
|
12 # N.B. this requires CGI__Ajax version >=0.49
|
|
rlm@0
|
13 #
|
|
rlm@0
|
14 # Also, this example has lots of stderr output, so follow your apache
|
|
rlm@0
|
15 # log files to see what's going on.
|
|
rlm@0
|
16 #
|
|
rlm@0
|
17 use strict;
|
|
rlm@0
|
18 use CGI::Ajax 0.49;
|
|
rlm@0
|
19 use CGI;
|
|
rlm@0
|
20 use vars qw( $data );
|
|
rlm@0
|
21
|
|
rlm@0
|
22 # This is our data - top level keys get put in the leftmost select
|
|
rlm@0
|
23 # box, next level of keys get the second select box. Values will end
|
|
rlm@0
|
24 # up in the resultdiv html element
|
|
rlm@0
|
25 $data = {
|
|
rlm@0
|
26 'A' => { '1' => "A1", '2' => "A2", '3' => "A3", '42' => "A42" },
|
|
rlm@0
|
27 'B' => { 'green' => "Bgreen", 'red' => "Bred" },
|
|
rlm@0
|
28 'something' => { 'firefly' => "great show" },
|
|
rlm@0
|
29 'final_thing' => { 'email' => "chunkeylover53", 'name' => "homer",
|
|
rlm@0
|
30 'address' => "742 Evergreen Terrace" }
|
|
rlm@0
|
31 };
|
|
rlm@0
|
32
|
|
rlm@0
|
33 my $q = new CGI; # need a new CGI object
|
|
rlm@0
|
34
|
|
rlm@0
|
35 # compose our list of functions to export to js
|
|
rlm@0
|
36 my %hash = ( 'SetA' => \&set_listA,
|
|
rlm@0
|
37 'SetB' => \&set_listB,
|
|
rlm@0
|
38 'ShowResult' => \&show_result );
|
|
rlm@0
|
39
|
|
rlm@0
|
40 my $pjx = CGI::Ajax->new( %hash ); # this is our CGI::Ajax object
|
|
rlm@0
|
41 $pjx->js_encode_function('encodeURIComponent');
|
|
rlm@0
|
42
|
|
rlm@0
|
43 $pjx->DEBUG(1); # turn on debugging
|
|
rlm@0
|
44 $pjx->JSDEBUG(1); # turn on javascript debugging, which will place a
|
|
rlm@0
|
45 # new div element at the bottom of our page showing
|
|
rlm@0
|
46 # the asynchrously requested URL
|
|
rlm@0
|
47
|
|
rlm@0
|
48 print $pjx->build_html( $q, \&Show_HTML ); # this builds our html
|
|
rlm@0
|
49 # page, inserting js
|
|
rlm@0
|
50
|
|
rlm@0
|
51 # This subroutine is responsible for outputting the HTML of the web
|
|
rlm@0
|
52 # page. Note that I've added an additional javascript function to
|
|
rlm@0
|
53 # erase/reset contents. This prevents strange effects from
|
|
rlm@0
|
54 # overwriting a div without clearing it out first.
|
|
rlm@0
|
55 sub Show_HTML {
|
|
rlm@0
|
56 my $html = <<EOT;
|
|
rlm@0
|
57 <HTML>
|
|
rlm@0
|
58 <HEAD><title>Combo Example</title>
|
|
rlm@0
|
59 <SCRIPT>
|
|
rlm@0
|
60
|
|
rlm@0
|
61 // define some reset functions to properly clear out the divs
|
|
rlm@0
|
62 function resetdiv( ) {
|
|
rlm@0
|
63 if ( arguments.length ) {
|
|
rlm@0
|
64 // reset a specific div
|
|
rlm@0
|
65 for(var i = 0; i < arguments.length; i++ ) {
|
|
rlm@0
|
66 document.getElementById(arguments[i]).innerHTML = "";
|
|
rlm@0
|
67 }
|
|
rlm@0
|
68 } else {
|
|
rlm@0
|
69 // just reset all the divs
|
|
rlm@0
|
70 document.getElementById("listAdiv").innerHTML = "";
|
|
rlm@0
|
71 document.getElementById("listBdiv").innerHTML = "";
|
|
rlm@0
|
72 document.getElementById("resultdiv").innerHTML = "";
|
|
rlm@0
|
73 }
|
|
rlm@0
|
74 }
|
|
rlm@0
|
75
|
|
rlm@0
|
76 </SCRIPT>
|
|
rlm@0
|
77
|
|
rlm@0
|
78 </HEAD>
|
|
rlm@0
|
79 <BODY onload="resetdiv(); SetA([],['listAdiv']); return true;" >
|
|
rlm@0
|
80 <form>
|
|
rlm@0
|
81 <div id="listAdiv"></div>
|
|
rlm@0
|
82 <div id="listBdiv"></div>
|
|
rlm@0
|
83 <div id="resultdiv" style="border: 1px solid black; width: 240px; height: 80px; overflow: auto">
|
|
rlm@0
|
84 </div>
|
|
rlm@0
|
85 <input type="text" name="textfield">
|
|
rlm@0
|
86 <input type="submit" name="Submit" value="Submit"
|
|
rlm@0
|
87
|
|
rlm@0
|
88 </form>
|
|
rlm@0
|
89 </BODY>
|
|
rlm@0
|
90 </HTML>
|
|
rlm@0
|
91 EOT
|
|
rlm@0
|
92
|
|
rlm@0
|
93 return($html);
|
|
rlm@0
|
94 }
|
|
rlm@0
|
95
|
|
rlm@0
|
96 # these are my exported functions - note that set_listA and set_listB
|
|
rlm@0
|
97 # are just returning html to be inserted into their respective div
|
|
rlm@0
|
98 # elements.
|
|
rlm@0
|
99 sub set_listA {
|
|
rlm@0
|
100 # this is the returned text... html to be displayed in the div
|
|
rlm@0
|
101 # defined in the javascript call
|
|
rlm@0
|
102 my $txt = qq!<select id="listA" name="listA_name" size=3!;
|
|
rlm@0
|
103 $txt .= qq! onclick="resetdiv('resultdiv'); SetB( ['listA'], ['listBdiv'] ); return true;">!;
|
|
rlm@0
|
104 # get values from $data, could also be a db lookup
|
|
rlm@0
|
105 foreach my $topval ( keys %$data ) {
|
|
rlm@0
|
106 $txt .= '<option value='. $topval . '>'. $topval .' </option>';
|
|
rlm@0
|
107 }
|
|
rlm@0
|
108 $txt .= "</select>";
|
|
rlm@0
|
109 print STDERR "set_listA:\n";
|
|
rlm@0
|
110 print STDERR "returning $txt\n";
|
|
rlm@0
|
111 return($txt);
|
|
rlm@0
|
112 }
|
|
rlm@0
|
113
|
|
rlm@0
|
114 sub set_listB {
|
|
rlm@0
|
115 my $listA_selection = shift;
|
|
rlm@0
|
116 print STDERR "set_listB: received $listA_selection .\n";
|
|
rlm@0
|
117
|
|
rlm@0
|
118 # this is the returned text... html to be displayed in the div
|
|
rlm@0
|
119 # defined in the javascript call
|
|
rlm@0
|
120 my $txt = qq!<select multiple id="listB" name="listB_name" size=3 style="width: 140px"!;
|
|
rlm@0
|
121 $txt .= qq! onclick="ShowResult( ['listA','listB'], ['resultdiv'] ); return true;">!;
|
|
rlm@0
|
122
|
|
rlm@0
|
123 # get values from $data, could also be a db lookup
|
|
rlm@0
|
124 foreach my $midval ( keys %{ $data->{ $listA_selection } } ) {
|
|
rlm@0
|
125 $txt .= '<option value=' . $midval . '>' . $midval . "</option>";
|
|
rlm@0
|
126 }
|
|
rlm@0
|
127 $txt .= "</select>";
|
|
rlm@0
|
128 print STDERR "set_listB:\n";
|
|
rlm@0
|
129 print STDERR "returning $txt\n";
|
|
rlm@0
|
130 return($txt);
|
|
rlm@0
|
131 }
|
|
rlm@0
|
132
|
|
rlm@0
|
133 sub show_result {
|
|
rlm@0
|
134 my $listA_selection = shift;
|
|
rlm@0
|
135 my $txt = "";
|
|
rlm@0
|
136 # this loop is needed in case the user selected multiple elements in
|
|
rlm@0
|
137 # the second select box, listB
|
|
rlm@0
|
138 while ( @_ ) {
|
|
rlm@0
|
139 my $in = shift;
|
|
rlm@0
|
140 $txt .= $data->{ $listA_selection }->{ $in } . "<br>";
|
|
rlm@0
|
141 }
|
|
rlm@0
|
142
|
|
rlm@0
|
143 print STDERR "show_result - returning txt with value: $txt\n";
|
|
rlm@0
|
144 return( $txt );
|
|
rlm@0
|
145 }
|
|
rlm@0
|
146
|
