Beefy Boxes and Bandwidth Generously Provided by pair Networks
Pathologically Eclectic Rubbish Lister
 
PerlMonks  

Re: Adding fields to a form using Catalyst/TT

by chargrill (Parson)
on Oct 13, 2006 at 18:30 UTC ( #578200=note: print w/replies, xml ) Need Help??


in reply to Adding fields to a form using Catalyst/TT

HuckinFappy:

I've recently been trying to do something extremely similar, only instead of it being a work project, it was purely to learn how to get Catalyst to play nicely with AJAX-y type stuff.

Against the advice of some of the folks in #catalyst, I decided to use HTML::Prototype. Here are some of the changes I made to dynamically add a single form field using ajax and Catalyst. Note, I set up an observed field (text field) that, on change, would fire off the appropriate xhttpd request, as this was only a proof of concept for me. So, it's not 100% what you're looking to do, but may give you a head start.

First, in my lib/application.pm

use Catalyst qw/-Debug ConfigLoader Static::Simple Prototype /;

This loads the Catalyst::Plugin::Prototype plugin. Then, in my header.tt file, I had to have the following:

<head> [% c.prototype.define_javascript_functions %] </head>

... which generates the javascript used elsewhere in the HTML page. Then, I created a new .tt file for each form field I wanted to insert:

<table border="1" style="border: 1px;"> <tr> <td width="100">[% task_name %]</td> <td width="150"><input type="text" size="30" name="[% task_inpu +t_name %]" id="[% task_input_id %]"></td> <td width="250"><div id="[% task_output_name %]"></div></td> </tr> [% url = base _ 'application/newrow/' _ page.title %] [% c.prototype.observe_field( "$task_input_id", { url => url, with => "'input='+value", update => "$task_output_name" } ) %] </table>

Here, the div id "task_output_name" is what gets updated for this particular ajax call. And then in the .tt file that includes the .tt file above:

[% task_name = 'Project Name' %] [% task_input_name = 'project' %] [% task_output_name = 'project' %] [% task_input_id = 'project_id' %] [% INCLUDE taskrow.tt %]

Further, I had to make sure I had the "newrow" method defined in my lib/application/Controller/Application.pm file:

sub newrow : Local { my( $self, $c ) = @_; my $newrow = buildrow() || 'some default text'; $c->res->output( $newrow ); } sub buildrow : Private { my $html = ''; my $template = Template->new({ CATALYST_VAR => 'c', INCLUDE_PATH => [ workest->path_to( 'root', 'src' ), ], OUTPUT => \$html, }); $template->process( 'taskrow.tt', { task_name => 'Brand New Task', task_input_name => 'newtask', task_output_name => 'newtask', task_input_id => 'newtask_id', } ); $html = $html || $template->error() || 'template broke'; return $html; }

This is example is taken from my work-in-progess (and as such probably isn't the best way to do things), is greatly simplified, and doesn't do much, but does handle creating the ajax request, using TT to generate some HTML based on a template I already had setup, and inserting the HTML into the <div> tag defined. It also probably won't work for you without some major tweaking, since I only extracted bits of what I've done (hopefully the right ones ;) ) and gone through it without completely checking to make sure the bits I've shown here are 100% what you need :)

If you get stuck after this, try going to this url, which is where I got started with it.

Happy catalysting,



--chargrill
s**lil*; $*=join'',sort split q**; s;.*;grr; &&s+(.(.)).+$2$1+; $; = qq-$_-;s,.*,ahc,;$,.=chop for split q,,,reverse;print for($,,$;,$*,$/)

Replies are listed 'Best First'.
Re^2: Adding fields to a form using Catalyst/TT
by mreece (Friar) on Oct 13, 2006 at 22:41 UTC
    Against the advice of some of the folks in #catalyst, I decided to use HTML::Prototype.
    do you recall the reasons given against HTML::Prototype? it has been a while (over a year?) since i visited #catalyst and folks were still recommending prototype at the time!

      It's funny, when I explained what I wanted to do to jrockway, he commented that HTML::Protoype was fine. I peeked in the other day while HuckinFappy was asking around, and it seems dojo and mochikit are in favor by the #catalyst folk.

      I believe the specific quotes I saw were something like "prototype == matt's script archive" and "Prototype does the Javascript equivalent of stuffing UNIVERSAL with methods". Note, these are not my thoughts, and I couldn't find any substantiation for these assertions.

      But, it seems to work OK for the things that I have so far found that I want to do, so naturally YMMV.

      Updated: Fixed links (Thanks, Hue-Bond)



      --chargrill
      s**lil*; $*=join'',sort split q**; s;.*;grr; &&s+(.(.)).+$2$1+; $; = qq-$_-;s,.*,ahc,;$,.=chop for split q,,,reverse;print for($,,$;,$*,$/)
        You got those quotes right. BUt I'm so far over my own head, I couldn't offer any opinion on them (since I'd never heard of any of the toolkits!)

        Ok, so it seems based on everyone's replies, and the #catalyst discussions, that if I'm going to get too far with Catalyst and TT, and accomplish some of what I've got pictured, I'm going to have to move into javascript and ajax.

        This is a tad daunting for someone who is very proficient in perl, but still hand-codes HTML in late 1990's style.

        Can anyone point me in a good direction for a tutorial of some sort that I can work through to wrap my brain around all of this?

        Thanks,
        Jeff

        Prototype is showing its age now, but it does work. I personally don't like the way the Catalyst plugin works... but it's Good Enough.
Re^2: Adding fields to a form using Catalyst/TT
by HuckinFappy (Pilgrim) on Oct 24, 2006 at 02:59 UTC
    Just a followup for closure sake.

    After much struggling and gnashing of teeth, I'm getting the hang of this! Thanks again chargrill for the pointers in the right direction. I also found much help here, and here.

    To infinity and beyond!

    ~Jeff

Log In?
Username:
Password:

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: note [id://578200]
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others chilling in the Monastery: (7)
As of 2023-02-06 12:02 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    I prefer not to run the latest version of Perl because:







    Results (34 votes). Check out past polls.

    Notices?