Here is some workable code. You'll need CGI::Ex installed. Then just paste the code into a file, chmod it 755, and your set to go.
The javascript returned by the ajax_js step would be better off moved into a separate ajax.js file and served by apache. You'll then have to change the reference to it in the <script src=> tag.
#!/usr/bin/perl
=head1 NAME
ajax - Show a sample ajax request
=cut
use strict;
use warnings;
use base qw(CGI::Ex::App);
use CGI::Ex::Dump qw(debug);
use CGI::Ex::JSONDump qw(JSONDump);
__PACKAGE__->navigate;
###----------------------------------------------------------------###
sub main_hash_swap {
return {
colors => [qw(Red Green Blue Yellow Orange Purple)],
};
}
sub main_finalize {
my $self = shift;
my $form = $self->form;
debug "You sent the following form", $form;
return 0;
}
sub main_file_print {
return \ q{
<html>
<script src="[% script_name %]/ajax_js"></script>
<form name=myform method=post>
<select name=color>[% FOREACH color IN colors ~%]<option>[% color %]</
+option>[% END %]</select>
<select name=shape></select>
<input type=submit value=Go><br>
<div id="show_me"></div>
</form>
<script>
var func = document.myform.color.onchange = function () {
var color = document.myform.color[document.myform.color.selectedIn
+dex].text;
var query = '[% script_name %]/js_colors?color='+escape(color);
document.getElementById('show_me').innerHTML = query;
if (document.my_request) document.my_request.abort(); // cancel du
+ring fast scroll
document.my_request = ajax_request({
url: query,
handler: function (req, args) {
var options = eval(req.responseText);
var el = document.myform.shape;
el.options.length = 0;
for (var i = 0; i < options.length; i++) el.options[i] = new O
+ption(options[i]);
}
});
};
window.onload = func; // need to initialize at load
</script>
</html>
};
}
###----------------------------------------------------------------###
sub js_colors_run_step {
my $self = shift;
my $color = $self->form->{'color'};
my @colors;
@colors = map { "$color $_" } qw(Circle Square Triangle Rectangle
+Pentagon);
$self->cgix->print_content_type('application/x-javascript');
print JSONDump(\@colors, {pretty => 1});
return 1;
}
###----------------------------------------------------------------###
sub ajax_js_run_step {
shift->cgix->print_content_type('application/x-javascript');
print q {
/* ajax.js - Paul Seamons - License BSD - Copyright 2007 */
/* $Id: ajax.js,v 1.1 2007-02-23 21:36:20 paul Exp $ */
var ajax_activexobject_types = [
"Msxml2.XMLHTTP.7.0",
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.5.0",
"Msxml2.XMLHTTP.4.0",
"Msxml2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"];
function ajax_xmlhttp_request () {
var req;
if (window.XMLHttpRequest) {
try { req = new XMLHttpRequest() } catch (e) { }
} else if (window.ActiveXObject) {
for (var i = 0; i < ajax_activexobject_types.length; i++) {
try { req = new ActiveXObject(ajax_activexobject_types[i]) } cat
+ch(e) { }
if (req) {
ajax_activexobject_types = [ajax_activexobject_types[i]]; // c
+ache
break;
}
}
}
return req;
}
function ajax_request (args) {
var req = args.request ? args.request : ajax_xmlhttp_request();
if (! req) { alert('Could not find a workable XMLHttpRequest object.
+'); return }
if (! args.method) args.method = 'GET';
if (! args.url) { alert('Missing url parameter'); return }
if (typeof(args.async) == 'undefined') args.async = true;
if (! args.content) args.content = '';
if (! args.handler) { alert('Missing handler function parameter'); r
+eturn }
if (! args.username)
req.open(args.method, args.url, args.async);
else req.open(args.method, args.url, args.async, args.username, args
+.password);
req.onreadystatechange = function () {
if (req.readyState != 4) {
if (args.handler_other_state) args.handler_other_state(req, args
+, req.readyState);
return;
}
if (req.status != 200) {
if (req.status == 0) {
if (args.handler_0_status) args.handler_0_status(req, args);
return;
}
if (args.handler_other_status) args.handler_other_status(req, ar
+gs, req.status);
alert('Got a non-200 status: '+req.status+' - '+req.statusText);
return;
}
args.handler(req, args);
};
if (args.headers)
for (var i = 0; i < args.headers.length; i++)
req.setRequestHeader(args.headers[i][0], args.headers[i][1]);
req.send(args.content);
return req;
}
};
}
my @a=qw(random brilliant braindead); print $a[rand(@a)];
|