comment on

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.

In reply to Re: How to store the value of a Javascript function as a Perl variable by Your Mother
in thread How to store the value of a Javascript function as a Perl variable by coleb1115

Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!

Titles consisting of a single word are discouraged, and in most cases are disallowed outright.

Read Where should I post X? if you're not absolutely sure you're posting in the right place.

Please read these before you post! —

Posts may use any of the Perl Monks Approved HTML tags:

a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr

You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)

	For:		Use:
	&		`&`
	<		`<`
	>		`>`
	[		`[`
	]		`]`

Link using PerlMonks shortcuts! What shortcuts can I use for linking?

See Writeup Formatting Tips and other pages linked from there for more info.