[Catalyst] Generate dynamic list

[Gavin Henry]

<quote who="Danny Warren">
> I just insclude the prototype.js script directly in my html template
> whenever I need to use prototype.  More info:
>
> http://www.prototypejs.org/
> http://wiki.script.aculo.us/scriptaculous/show/Prototype
>
> Danny Warren
>
>

Yeah, Javascript is the way to go. Here's what I do with Dojo:

myapp.yml:

# Used to expose subusers as JSON data for Dojo
View::JSON:
    expose_stash: users



Controller:

399 	sub repousers : Local {
400 	    my ( $self, $c ) = @_;
401 	    my $subid = $c->req->param('subscriber');
402
403 	    my $users;
404 	    if ($subid eq 'all') {
405 	        $users = [ $c->model('AdminDB::SubUsers')->all() ];
406 	    }
407 	    else {
408 	        $users = [ $c->model('AdminDB::SubUsers')
409 	            ->search( { subscriber_id => $subid } )->all() ];
410 	    }
411
412 	    $c->stash->{users} = {};
413 	    for my $user (@{$users}) {
414 	        $c->stash->{users}->{$user->account_id} = $user->email;
415 	    }
416
417 	    $c->detach('Admin::View::JSON');
418 	}


This make a JSON object like {"10": "name at name.com", "11": "name1 at name.com"}


Now in the include that has js in:

dojo.require("dojo.lfx.html");

212 function getRepoUsers(subid, selectid) {
213 	users = dojo.byId(selectid);
214 	dojo.io.bind({
215 	    url: "[% c.uri_for('/admin/subscribers/repousers'); %]",
216 	    method: "POST",
217 	    content: { subscriber: subid },
218 	    // Setting this mimitype and dojo automatically converts
219 	    // the incoming data from JSON to an object. Without it
220 	    // we need: var repousers = dojo.json.evalJson(data);
221 	    mimetype: 'text/json',
222 	    load: function(type, repousers) {
223 	       users.options.length = 0;
224 	       users.options[0] = new Option('Select...', 'all', true);
225 	       var i = 0;
226 	       for (var key in repousers) {
227 	           users.options[(i+1)] = new Option(repousers[key], key,
false);
228 	           i++;
229 	       }
230 	       dojo.lfx.html.highlight(selectid, '#F5FF97', 700).play(300);
231 	     }
232   });
233 }

content: { subscriber: subid } is for the first select box, and we set a
onchange="getRepoUsers();" for it.

That POSTs the subid, we do the search via the DB and then send back JSON
data which is also used in above inside the "load:" to create the second
select box data and highlight, then fade the new info.

TT:

3 	[% IF deexadmin %]
4 	<tr>
5 	    <td><label for="subidfilter">Subscriber:</label></td>
6 	    <td><select name="subidfilter" id="subidfilter"
onchange="getDeexRepoUsers(this.value, 'users');">
7 	            <option value="all">All</option>
8 	        [% FOREACH subscriber IN subscribers %]
9 	            <option value="[% subscriber.subid %]">[%
subscriber.suborgname %]</option>
10 	        [% END %]
11 	        </select>
12 	    </td>
13 	</tr>
14 	[% END %]
15 	<tr>
16 	<td><label for="users">User:</label></td>
17 	<td>
18 	    <select name="users" id="users">
19 	            <option value="all">All</option>
20 	        [% FOREACH user IN users %]
21 	            <option value="[% user.account_id %]">[% user.email
%]</option>
22 	        [% END %]
23 	    </select>
24 	</td>
25 	</tr>

Easy! ;-)

Gavin.

-- 
Walking the road to enlightenment... I found a penguin and a camel on the
way..... Fancy a yourname at perl.me.uk? Just ask!!!
http://perlmonks.org/?node_id=386673