[Tapestry Wiki] Update of "Tapestry5HowToIntegrateJQuery" by PahneAndy

[Apache Wiki <wi...@apache.org>]

Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Tapestry Wiki" for change notification.

The following page has been changed by PahneAndy:
http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery

New page:
How to integrate [http://jquery.com/ jQuery] with Tapestry 5.[[BR]]

== 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 [http://docs.jquery.com/Using_jQuery_with_Other_Libraries jQuery docs] for a more detailed explanation of the problem.


== Adjusting jQuery ==

1. 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 {

}
}}}






== Related Mailing List Threads ==

[http://tapestry.markmail.org/message/zqvcgktzg4nxluos?q=jQuery#query:jQuery+page:1+mid:zqkeztubr7tuv7b7+state:results Thread integration jQuery components]

[http://tapestry.markmail.org/message/pgyn7jojrmzepjeo?q=jQuery&page=2#query:jQuery+page:2+mid:xjxead7q7xuacfs2+state:results Thread using jQuery in 5.0.18]

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org