Author image David P.C. Wollmann
and 1 contributors


Catalyst::View::Component::jQuery - Add a JavaScript::Framework::jQuery object to TT Views


Version 0.01


 package MyApp::View::TT;

 use Moose;
 extends 'Catalyst::View::TT';
 with 'Catalyst::View::Component::jQuery';

In your Controller:

    name => 'Superfish',
    target_selector => '#navbar',

#navbar is the document id of a UL element containing navigation links.

See CatalystX::Menu::Suckerfish for one method for generating such a UL element automatically by decorating action methods with attributes.

In your template:

 [% jquery.script_src_elements %]
 [% jquery.link_elements %]

 [% jquery.document_ready %]

Will insert something like:

 <link type="text/css" href="/css/jquery-ui.css" rel="stylesheet" media="all" />
 <link type="text/css" href="/css/superfish.css" rel="stylesheet" media="all" />
 <script type="text/javascript" src="/js/jquery.js" />
 <script type="text/javascript" src="/js/superfish.js" />

 <script type="text/javascript">
 $(document).ready(function (){


This role lazily constructs a JavaScript::Framework::jQuery object and provides an interface to that object to the role consumer (your Catalyst::View::TT View component).

To use this role, you must use Moose in your View component:

 package MyApp::View::TT;

 use Moose;
 extends 'Catalyst::View::TT';
 with 'Catalyst::View::Component::jQuery';

Lazy construction means that the JavaScript::Framework::jQuery object is not allocated until the accessor is called. If you don't use the jquery method in your template the object will not be created.


The package config hash supplied to your View module should contain a 'JavaScript::Framework::jQuery' key with a valid JavaScript::Framework::jQuery configuration hash.

If the JavaScript::Framework::jQuery key isn't found, a key named 'Catalyst::View::Component::jQuery' is searched for.

If neither key is found an exception is raised.

If you're using Catalyst::Plugin::ConfigLoader in your application the configuration may be included in your application .conf file, application module (via __PACKAGE__->config(...)) or any other location ConfigLoader searches for configurations.

Calling __PACKAGE__->config() in the application module is probably the best alternative. The expression of an array of anonymous hash references has proven difficult in the human-readable config formats.

See JavaScript::Framework::jQuery for a description of the data that must be included in the config hash.


render( ) [around]

A Moose around method modifier wraps the Catalyst::View::TT render method so we can add the jquery method in templates:

 # in your template

 [% jquery.script_src_elements %]

 # will insert your <script src="..." /> markup elements.

See Moose::Manual::MethodModifiers for more information.

jquery( )

Adds jquery method to the role-consuming View component:

 # in your Controller:



David P.C. Wollmann, <converter42 at>


Please report any bugs or feature requests to bug-catalyst-view-role-jquery at, or through the web interface at I will be notified, and then you'll automatically be notified of progress on your bug as I make changes.


You can find documentation for this module with the perldoc command.

    perldoc Catalyst::View::Component::jQuery

You can also look for information at:


JavaScript::Framework::jQuery, CatalystX::Menu::Suckerfish, Moose, Moose::Role, Catalyst, perl


Copyright 2009 David P.C. Wollmann, all rights reserved.

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.