How to integrate jQuery with Tapestry 5.
Introduction
Unfortunatly it is not possible to use a current jQuery release out of the box with Tapestry 5. But only one small step is necessary to make them play together well.
It is necessary to adjust the jQuery sources, because Tapestry 5 uses the Prototype Javascript library. Both javascript libraries make use of the variable
$
in the global javascript namespace. See the jQuery docs for a more detailed explanation of the problem.
Adjusting jQuery
- Download the current jQuery release. Be sure to use the minimized version for production use
2. Open the file and append
jQuery.noConflict();
on a separate line at the very end of the file
Your file should look like this:
/*
* jQuery JavaScript Library v1.3.2
* http://jquery.com/
*
* Copyright (c) 2009 John Resig
* Dual licensed under the MIT and GPL licenses.
* http://docs.jquery.com/License
*
* Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009)
* Revision: 6246
*/
(function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new .........
/*
* Sizzle CSS Selector Engine - v0.9.3
* Copyright 2009, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
* More information: http://sizzlejs.com/
*/
(function(){var R=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"]........
/*
* Must run in noConflict mode!
*/
jQuery.noConflict();
That's it. Now you can use this script like you use any other javascript on your Tapestry 5 pages.
Unfortunatly the
$
name is still reserved for Prototype. The jQuery documentation has more information on how to overcome this limitation.
Creating a Component Library
You may want to create a component library for your adjusted jQuery source and the most useful plugins that you'll need in your projects. If you don't know how to do that, see Tapestry5HowToCreateYourOwnComponentLibrary
We have choosen to create a library that contains jQuery core, the UI plugin and the well known form plugin. Using any of these is as simple as this:
@IncludeJavaScriptLibrary({
"classpath:/x/y/z/jquery/components/jquery.min.js",
"classpath:/x/y/z/jquery/components/jQuery.forms.js",
}
)
public class SomePageClass {
}