Mercurial > rlmcintyre

comparison BoosterPack/scripts/.svn/text-base/pjx_combo.pl.svn-base @ 0:0d795f02a8bb tip

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