Combo Example

robert@0: #!C:/strawberry/perl/bin/perl.exe robert@0: robert@0: # CGI-Ajax: example script 'pjx_combo.pl' robert@0: # robert@0: # INSTALL: place in an apache location that can execute perl scripts robert@0: # robert@0: # this script demonstrates a set of dynamic select boxes, where the robert@0: # selection in a box changes other select box contents, or html div robert@0: # values. The data in each select box comes from the data anonymous robert@0: # hash, but could just as easily come from a database connection, etc. robert@0: # robert@0: # N.B. this requires CGI__Ajax version >=0.49 robert@0: # robert@0: # Also, this example has lots of stderr output, so follow your apache robert@0: # log files to see what's going on. robert@0: # robert@0: use strict; robert@0: use CGI::Ajax 0.49; robert@0: use CGI; robert@0: use vars qw( $data ); robert@0: robert@0: # This is our data - top level keys get put in the leftmost select robert@0: # box, next level of keys get the second select box. Values will end robert@0: # up in the resultdiv html element robert@0: $data = { robert@0: 'A' => { '1' => "A1", '2' => "A2", '3' => "A3", '42' => "A42" }, robert@0: 'B' => { 'green' => "Bgreen", 'red' => "Bred" }, robert@0: 'something' => { 'firefly' => "great show" }, robert@0: 'final_thing' => { 'email' => "chunkeylover53", 'name' => "homer", robert@0: 'address' => "742 Evergreen Terrace" } robert@0: }; robert@0: robert@0: my $q = new CGI; # need a new CGI object robert@0: robert@0: # compose our list of functions to export to js robert@0: my %hash = ( 'SetA' => \&set_listA, robert@0: 'SetB' => \&set_listB, robert@0: 'ShowResult' => \&show_result ); robert@0: robert@0: my $pjx = CGI::Ajax->new( %hash ); # this is our CGI::Ajax object robert@0: $pjx->js_encode_function('encodeURIComponent'); robert@0: robert@0: $pjx->DEBUG(1); # turn on debugging robert@0: $pjx->JSDEBUG(1); # turn on javascript debugging, which will place a robert@0: # new div element at the bottom of our page showing robert@0: # the asynchrously requested URL robert@0: robert@0: print $pjx->build_html( $q, \&Show_HTML ); # this builds our html robert@0: # page, inserting js robert@0: robert@0: # This subroutine is responsible for outputting the HTML of the web robert@0: # page. Note that I've added an additional javascript function to robert@0: # erase/reset contents. This prevents strange effects from robert@0: # overwriting a div without clearing it out first. robert@0: sub Show_HTML { robert@0: my $html = < robert@0: Combo Example robert@0: robert@0: robert@0: robert@0: robert@0:

robert@0:

robert@0: robert@0: robert@0: robert@0: robert@0: EOT robert@0: robert@0: return($html); robert@0: } robert@0: robert@0: # these are my exported functions - note that set_listA and set_listB robert@0: # are just returning html to be inserted into their respective div robert@0: # elements. robert@0: sub set_listA { robert@0: # this is the returned text... html to be displayed in the div robert@0: # defined in the javascript call robert@0: my $txt = qq!"; robert@0: print STDERR "set_listA:\n"; robert@0: print STDERR "returning $txt\n"; robert@0: return($txt); robert@0: } robert@0: robert@0: sub set_listB { robert@0: my $listA_selection = shift; robert@0: print STDERR "set_listB: received $listA_selection .\n"; robert@0: robert@0: # this is the returned text... html to be displayed in the div robert@0: # defined in the javascript call robert@0: my $txt = qq!"; robert@0: print STDERR "set_listB:\n"; robert@0: print STDERR "returning $txt\n"; robert@0: return($txt); robert@0: } robert@0: robert@0: sub show_result { robert@0: my $listA_selection = shift; robert@0: my $txt = ""; robert@0: # this loop is needed in case the user selected multiple elements in robert@0: # the second select box, listB robert@0: while ( @_ ) { robert@0: my $in = shift; robert@0: $txt .= $data->{ $listA_selection }->{ $in } . "
"; robert@0: } robert@0: robert@0: print STDERR "show_result - returning txt with value: $txt\n"; robert@0: return( $txt ); robert@0: } robert@0: