Mercurial > rlmcintyre

     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
author	Robert McIntyre <rlm@mit.edu>
date	Mon, 27 Sep 2010 16:57:26 -0400
parents
children