Re: Adding fields to a form using Catalyst/TT

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

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 /;
[download]

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>
[download]

... 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>
[download]

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               %]
[download]

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;
}
[download]

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($,,$;,$*,$/)
[download]

In Section Seekers of Perl Wisdom