Description

jQuery Plugin

This plugin provides integration with jQuery-Javascript-library. When installing the plugin, it downloads and installs automatically the latest jQuery 1.4 distribution in your application and registers itself to be used with the adaptive AJAX tags.

Ajax via jQuery in Partial GSP

Sometimes, the GSP being rendered is itself an Ajax respose. That is, rather than being a whole HTML page in response to a regular HTTP request, it's partial HTML that will dynamically replace the body of a DIV. In this case, there is no head section, so the g:javascript tag is not the right way to trigger the jquery binding.

Instead, use the g:setProvider tag at the top of the response (or anywhere above the first ajax-adpative tag).

<g:setProvider library="jquery"/>

Delayed Javascript execution

One of the advantages of jQuery is that you can specify that your javascript is not to run until the page has loaded completely. To do that with this plugin, use the supplied jq:jquery tag (instead of g:javascript):

Change jQuery-version

Sometimes you need an older version of jQuery but you also want to take the advantage of grails build-in AJAX-tags.
Since 1.4.2.1 you can specify the following in your application Config.groovy-file:

jquery {
sources = 'jquery' // Holds the value where to store jQuery-js files /web-app/js/
version = '1.4.1' // The jQuery version in use
}

sources Specifies the folder underneath web-app/js where the jQuery-lib should beversion Specifies the version of the lib

The settings above will result in js/jquery/jquery-1.4.1.min as location

jq:resource

Idea

This tag has been developed to help you load all the resources you need for
most of your jquery plugins, which are javascript and css files. Although
that taglib was design with with Jquery UI in mind, it can be used with all
other kind of jquery plugins. With so many available on the web, that can be
only a good
thing to make their integration easier

Config

You can specify some properties for the taglib in the conf/JqueryConfig.groovy file

Taglib-API

bundle: bundle which your components belongs to. It will be used to build
the filename to include. Ex: "ui" , "effect" optional

components: list string with the name of the components you want to use in
your page. Ex: "datepicker, tabs", "jcrop" mandatory

theme: the name of the folder where to find the css files of the components.
Ex: "cupertino", optional, default: "base"

Implementation

With the tag jq:resource, you list components you want to include, then the
taglib is using your configuration and some convention/defaults to build the
path of
js and css files your components may need. It'll then check if the file
exist in your grails so that i can create the <link> and <style> tags
needed.
Also, if your environement is dev or test, it will include the full version
of the js, if it's production it will try to include the minified version.

The algorithm is as follow, for a component named "mycomp" in the bundle
"ui", on a dev config:

build the js filename from the component and bundle names => ui.mycomp.js

check if the file ui.mycomp.js file exists in the js folder

add the tag <style src="jsfolder/ui.mycomp.js" .. >

if not added before and if the file exist, add the tag <style src="jsfolder/ui.core.js" .. >

check if the css file "cssfolder/base/ui.mycomp.css" exist

add the tag <link href="cssfolder/base/ui.mycomp.css" ...>

if not added before and exist, add <link href="cssfolder/base/ui.core.css"...>

if not added before and exist, add <link href="cssfolder/base/ui.theme.css" ...>

Tips

try as much as possible to follow the standards, which follow the Jquery UI folder structure and naming convention

make sure that you copy all the necessary files in the right place, so that the taglib can find your file

try to make only one call to the taglib per bundle, or you will get the "core" css and js file included several times

Manually Installing jQuery plugins ("sub-plugins")

Manually installing a plugin is quite easy.

First, save the plugin code to your web-app/js/jquery folder. It's not required, but for consistency, you might make sure it has a dot-notation prefix of "jquery.". For example, to use Josh Bush's progress bar plugin
(http://digitalbush.com/projects/progress-bar-plugin/), open