I am very sorry. My text editor is behaving strangely today. I don't know where those back ticks came from. I'm sorry for the inconvenience. My PSGI code goes like this: 


#!/usr/bin/perl
use strict;
use warnings;

use Plack::Request;
use Plack::Response;
use Plack::Builder;

my %router = (

    '/'        =>    \&beverage,
    '/ajax'      =>    \&fruit_juice

);


my $app = sub {

    my $env = shift;
    my $request = Plack::Request->new($env);
    my $route = $router{$request->path_info};
    if ($route) {
        return $route->($env);
    }
    else
    {
        return [
            '404',
            [ 'Content-Type' => 'text/html' ],
            [ '404 Not Found' ],
            ];
    }

};



sub beverage {

    return [
        200, 
        ['Content-Type' => 'text/html'],
        ['<html>
          <head>
         <script type='text/javascript' src='/static/javascript.js'></
+script>
         </head>
         <body>
        <p>Beverage</p>
    <select name='beverage' id='beverages' onchange='get_choices()'>
    <option value='Alcholic'>Alcoholic</option>
    <option value='Non-alcoholic'>Non-alcoholic</option>
    </select>
    
    <p>Choices</p>
    <select id='choices'>
    <option value='Beer'>Beer</option>
    <option value='Red Wine'>Red Wine</option>
    </select>
        </body>
        </html>']
    ];    

};


sub fruit_juice {

    my $env = shift;
    my $request = Plack::Request->new($env);
    my $beverage = $request->param('beverage'); 
    
    my $response = Plack::Response->new(200); # new Plack::Response
    if ($beverage eq 'Non-alcoholic') 
    {
    $response->headers({ 'Content-Type' => 'text/html' });
    $response->content("<option value='Orange Juice'>Orage Juice</opti
+on>
          <option value='Grape juice'>Grape Juice</option>");
    return $response->finalize;
    }
};

builder {
    # serve static files
    enable 'Static', path => sub { s!^/static/!! }, root => '/Library/
+WebServer/Documents';
    $app;
};

[download]

My Javascript-AJAX code goes something like this.


function get_choices() 
    { 
        var xmlhttp;
        if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();}  
        else {xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');}      
        var x = document.getElementById(‘beverages’).value;
        var z = ‘beverage=' + x;
        xmlhttp.open('POST’,'/ajax',true);
        xmlhttp.send(z); 
        xmlhttp.onreadystatechange=function() { 
        if (xmlhttp.readyState==4 && xmlhttp.status==200){document.get
+ElementById(‘choices’).innerHTML=xmlhttp.responseText;}}
    }

[download]

What I am hoping to accomplish is to be able to populate the Choices dropdown menu with a new set of options (in this case, types of fruit juice) upon selecting 'Non-alcoholic' on the Beverage dropdown menu by invoking the fruit_juice subroutine asynchronously via AJAX. For some reason unknown to me, I couldn't make it work. I am sure I'm missing something but I don't know what it is. I'd be very much obliged if you could help me out on this problem. Thank you

In reply to AJAX and PSGI/Plack by tiny_monk

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • 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:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.