comment on

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 /;
[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 reply to Re: Adding fields to a form using Catalyst/TT by chargrill
in thread Adding fields to a form using Catalyst/TT by HuckinFappy

Are you posting in the right place? Check out Where do I post X? to know for sure.
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
Want more info? How to link or How to display code and escape characters are good places to start.


good chemistry is complicated, and a little bit messy -LW
	PerlMonks