Mercurial > boosterpack
diff scripts/pjx_combo.pl @ 0:477258d09353 boosterpack
[svn r1] initial import
| author | robert |
|---|---|
| date | Sun, 30 Aug 2009 02:19:26 -0400 |
| parents | |
| children |
line wrap: on
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/scripts/pjx_combo.pl Sun Aug 30 02:19:26 2009 -0400 1.3 @@ -0,0 +1,146 @@ 1.4 +#!C:/strawberry/perl/bin/perl.exe 1.5 + 1.6 +# CGI-Ajax: example script 'pjx_combo.pl' 1.7 +# 1.8 +# INSTALL: place in an apache location that can execute perl scripts 1.9 +# 1.10 +# this script demonstrates a set of dynamic select boxes, where the 1.11 +# selection in a box changes other select box contents, or html div 1.12 +# values. The data in each select box comes from the data anonymous 1.13 +# hash, but could just as easily come from a database connection, etc. 1.14 +# 1.15 +# N.B. this requires CGI__Ajax version >=0.49 1.16 +# 1.17 +# Also, this example has lots of stderr output, so follow your apache 1.18 +# log files to see what's going on. 1.19 +# 1.20 +use strict; 1.21 +use CGI::Ajax 0.49; 1.22 +use CGI; 1.23 +use vars qw( $data ); 1.24 + 1.25 +# This is our data - top level keys get put in the leftmost select 1.26 +# box, next level of keys get the second select box. Values will end 1.27 +# up in the resultdiv html element 1.28 +$data = { 1.29 + 'A' => { '1' => "A1", '2' => "A2", '3' => "A3", '42' => "A42" }, 1.30 + 'B' => { 'green' => "Bgreen", 'red' => "Bred" }, 1.31 + 'something' => { 'firefly' => "great show" }, 1.32 + 'final_thing' => { 'email' => "chunkeylover53", 'name' => "homer", 1.33 + 'address' => "742 Evergreen Terrace" } 1.34 +}; 1.35 + 1.36 +my $q = new CGI; # need a new CGI object 1.37 + 1.38 +# compose our list of functions to export to js 1.39 +my %hash = ( 'SetA' => \&set_listA, 1.40 + 'SetB' => \&set_listB, 1.41 + 'ShowResult' => \&show_result ); 1.42 + 1.43 +my $pjx = CGI::Ajax->new( %hash ); # this is our CGI::Ajax object 1.44 +$pjx->js_encode_function('encodeURIComponent'); 1.45 + 1.46 +$pjx->DEBUG(1); # turn on debugging 1.47 +$pjx->JSDEBUG(1); # turn on javascript debugging, which will place a 1.48 + # new div element at the bottom of our page showing 1.49 + # the asynchrously requested URL 1.50 + 1.51 +print $pjx->build_html( $q, \&Show_HTML ); # this builds our html 1.52 + # page, inserting js 1.53 + 1.54 +# This subroutine is responsible for outputting the HTML of the web 1.55 +# page. Note that I've added an additional javascript function to 1.56 +# erase/reset contents. This prevents strange effects from 1.57 +# overwriting a div without clearing it out first. 1.58 +sub Show_HTML { 1.59 + my $html = <<EOT; 1.60 +<HTML> 1.61 +<HEAD><title>Combo Example</title> 1.62 +<SCRIPT> 1.63 + 1.64 +// define some reset functions to properly clear out the divs 1.65 +function resetdiv( ) { 1.66 + if ( arguments.length ) { 1.67 + // reset a specific div 1.68 + for(var i = 0; i < arguments.length; i++ ) { 1.69 + document.getElementById(arguments[i]).innerHTML = ""; 1.70 + } 1.71 + } else { 1.72 + // just reset all the divs 1.73 + document.getElementById("listAdiv").innerHTML = ""; 1.74 + document.getElementById("listBdiv").innerHTML = ""; 1.75 + document.getElementById("resultdiv").innerHTML = ""; 1.76 + } 1.77 +} 1.78 + 1.79 +</SCRIPT> 1.80 + 1.81 +</HEAD> 1.82 +<BODY onload="resetdiv(); SetA([],['listAdiv']); return true;" > 1.83 +<form> 1.84 + <div id="listAdiv"></div> 1.85 + <div id="listBdiv"></div> 1.86 + <div id="resultdiv" style="border: 1px solid black; width: 240px; height: 80px; overflow: auto"> 1.87 + </div> 1.88 + <input type="text" name="textfield"> 1.89 + <input type="submit" name="Submit" value="Submit" 1.90 + 1.91 + </form> 1.92 +</BODY> 1.93 +</HTML> 1.94 +EOT 1.95 + 1.96 + return($html); 1.97 +} 1.98 + 1.99 +# these are my exported functions - note that set_listA and set_listB 1.100 +# are just returning html to be inserted into their respective div 1.101 +# elements. 1.102 +sub set_listA { 1.103 + # this is the returned text... html to be displayed in the div 1.104 + # defined in the javascript call 1.105 + my $txt = qq!<select id="listA" name="listA_name" size=3!; 1.106 + $txt .= qq! onclick="resetdiv('resultdiv'); SetB( ['listA'], ['listBdiv'] ); return true;">!; 1.107 + # get values from $data, could also be a db lookup 1.108 + foreach my $topval ( keys %$data ) { 1.109 + $txt .= '<option value='. $topval . '>'. $topval .' </option>'; 1.110 + } 1.111 + $txt .= "</select>"; 1.112 + print STDERR "set_listA:\n"; 1.113 + print STDERR "returning $txt\n"; 1.114 + return($txt); 1.115 +} 1.116 + 1.117 +sub set_listB { 1.118 + my $listA_selection = shift; 1.119 + print STDERR "set_listB: received $listA_selection .\n"; 1.120 + 1.121 + # this is the returned text... html to be displayed in the div 1.122 + # defined in the javascript call 1.123 + my $txt = qq!<select multiple id="listB" name="listB_name" size=3 style="width: 140px"!; 1.124 + $txt .= qq! onclick="ShowResult( ['listA','listB'], ['resultdiv'] ); return true;">!; 1.125 + 1.126 + # get values from $data, could also be a db lookup 1.127 + foreach my $midval ( keys %{ $data->{ $listA_selection } } ) { 1.128 + $txt .= '<option value=' . $midval . '>' . $midval . "</option>"; 1.129 + } 1.130 + $txt .= "</select>"; 1.131 + print STDERR "set_listB:\n"; 1.132 + print STDERR "returning $txt\n"; 1.133 + return($txt); 1.134 +} 1.135 + 1.136 +sub show_result { 1.137 + my $listA_selection = shift; 1.138 + my $txt = ""; 1.139 + # this loop is needed in case the user selected multiple elements in 1.140 + # the second select box, listB 1.141 + while ( @_ ) { 1.142 + my $in = shift; 1.143 + $txt .= $data->{ $listA_selection }->{ $in } . "<br>"; 1.144 + } 1.145 + 1.146 + print STDERR "show_result - returning txt with value: $txt\n"; 1.147 + return( $txt ); 1.148 +} 1.149 +