Re: How to store the value of a Javascript function as a Perl variable

As mentioned, I think the underlying stuff is a bit unclear to you and I would recommend seeking out tutorials. This stuff is pretty easy once you understand it and extremely frustrating and difficult before then. So–

Here is something to play with to smooth your journey. This is a fully working proto-type which approximates what you want to do. You may need to install Plack, Plack::Builder, JSON, and Template. You should refer to them for early questions about how the code works. The jQuery is hosted at Google; see dev libs. I recommend never (well nearly never) using ids in HTML/JS. It's an easy bad habit to pick up at first but ids are a global for the DOM and they encourage faulty thinking and painting yourself into corners. Try to think in CSS classes and hierarchies, td.group a for example, as in the code.

Save the code below as app.psgi.
Run the code with plackup app.psgi -r. The -r will restart the server any time you make code changes.
Visit your app at http://localhost:5000/ (probably, command line will will give you the URL).

#!/usr/bin/env perl
use warnings;
use strict;
use Plack::Builder;
use Plack::Request;
use Template;
use JSON;

# Global "DB."
my %groups = ( sherk => [qw/ Whale Mako White Banjo /],
               moo => [qw/ Ankole Gaur Piedmontese /] );

# Reusable template engine object.
my $tt2 = Template->new;

# Reusable template in plain variable..
my $template = do { local $/; <DATA> };

my $html = sub {
    $tt2->process( \$template, { groups => \%groups }, \my $out);
    # This is a psgi response, status, headers, body.
    [ 200,
      [ "Content-Type" => "text/html" ],
      [ $out ] ];
};

my $ajax_server = sub {
    my $req = Plack::Request->new(shift);
    my $group = $groups{ $req->param("group") };
    die "Some kinda error, no such group\n" unless $group;
    [ 200,
      [ "Content-Type" => "application/json" ],
      [ encode_json({ result => $group }) ] ];
};

builder {
    mount "/ajax-groups" => $ajax_server;
    mount "/" => $html;
};

__DATA__
<html>
  <head>
    <title>OHAI</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.
+min.js"></script>
  <style>td { padding:1ex; border:1px solid black }</style>
  </head>
  <body>
  <table style="margin:15% auto">
    [% FOR group IN groups.keys.sort %]
    <tr>
       <td class="group">Group: <a href="#">[% group %]</a></td>
       <td class="member">...</td>
    </tr>
    [% END %]
    <tr>
       <td class="group">Group: <a href="#">Bad group</a></td>
       <td class="member">...</td>
    </tr>
  </table>
  <script type="text/javascript">
  jQuery(function($){
    $(".group a").css({cursor:"pointer"})
               .click(function(){
                   var group = $(this).text();
                   var $member = $(this).closest("tr").find(".member")
+;
                   $.ajax({url:"/ajax-groups"
                           ,data:{group:group}
                           ,dataType:"json"
                           ,success: function(json){
                               $member.hide();
                               $member.text( json.result.join(" + " ) 
+).fadeIn();
                           }
                           ,error: function(){ $member.text("ERROR!") 
+}
                          });
               });
  });
  </script>
  </body>
</html>
[download]

Update: took out the <caption /> since it wasn't being used.

Update: corrected mount statements though they were working (accidentally written as a list).

Update: corrected td.group a citation in exposition.

Comment on Re: How to store the value of a Javascript function as a Perl variable Select or Download Code