annotate scripts/pjx_combo.pl @ 10:3b52ac950753 boosterpack tip

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