How to include jquery.js in Grails?

Question

I have a Grails 2.0.0 project that was created using grails create-app. In my HTML and GSP files, I'm trying to include jquery.js. I've tried all of the following without success:

<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery/jquery.js"></script>
<g:javascript library="jquery"/>

The first two <script> tags results in 404 Not Found (verified with Firebug). The <g:javascript>tag results in nothing being included (verified using view source).

On my Grails application's home page, it indicates that jquery 1.7.1 is installed (under "INSTALLED PLUGINS").

What is the correct way in Grails to include the jquery .js file?

Follow-up: The .GSP file:

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
  <head>
    <title>Test</title>
    <g:javascript library="jquery/jquery"/>
  </head>
  <body>
    <h1>Test</h1>
  </body>
</html>

Results in the follow HTML source:

<html>
  <head>
    <title>Test</title>

  </head>
  <body>
    <h1>Test</h1>
  </body>
</html>

Note the lack of jquery.js being included.

Follow-up 2:

I'm creating my app using grails create-app:

13:56:40 ~/grailsDev $ grails create-app helloworld
| Created Grails Application at /Users/steve/grailsDev/helloworld
13:56:57 ~/grailsDev $ cd helloworld/
13:57:06 ~/grailsDev/helloworld $ ls -al web-app/js
total 8
drwxr-xr-x  3 steve  staff  102 Jan 21 13:56 .
drwxr-xr-x  7 steve  staff  238 Dec 15 08:04 ..
-rw-r--r--  1 steve  staff  183 Dec 14 22:56 application.js
13:57:23 ~/grailsDev/helloworld $ grails -version

Grails version: 2.0.0

score 27 · Accepted Answer · answered Jan 21 '12 at 22:59

Apparently <r:layoutResources/> needs to be included in <head> (after <q:javascript library='jquery' />). The following actually works:

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
  <head>
    <title>Simple GSP page</title>
    <g:javascript library='jquery' />
    <r:layoutResources/>
  </head>
  <body>
    Place your content here
  </body>
</html>

score 5 · Answer 2 · answered Jan 21 '12 at 22:15

5

The jquery plugin is installed by default in 2.0 - see grails-app/conf/BuildConfig.groovy. To use jquery.js in a GSP just add this line:

<g:javascript library='jquery' />

answered Jan 21 '12 at 22:15

Burt Beckwith

75,342
5
143
156

score 5 · Answer 3 · answered Jan 21 '12 at 22:23

Steve after installing Jquery plugin thru grails install-plugin jquery you have to execute another grails command to download the jquery file in your app

grails installJQuery

This target downloads and installs jquery-1.7.1.js and jquery-1.7.1.min.js under web-app/js/jquery/

Nick Grealy · Answer 4 · 2015-09-18T04:00:20.827

As per the current docs - http://grails.org/plugin/jquery (Grails version: 1.3 > *) on 18th Sept, 2015

Installation

To install the jQuery plugin type this command from your project's root folder:

grails install-plugin jquery

Targets:

grails installJQuery

This target downloads and installs jquery-1.4.2.js and jquery-1.4.2.min.js under web-app/js/jquery/

The complete jQuery distribution is downloaded and installed under your project's /web-app/js/jQuery folder.

Usage

Ajax via jQuery

To have the Grails' adaptive AJAX support adapt itself to jQuery (rather than the default of Prototype, or another choice like YUI or Dojo):

Since Grails 1.2:

Add this line to your layout-file

<g:javascript library="jquery" plugin="jquery"/>

and the following to your grails-app/conf/config.groovy

grails.views.javascript.library="jquery"

alternatively you can use:

<g:javascript library="jquery" />

(without plugin="jquery") but you will need to call the grails installJQuery target (see Installation Tab)

score 4 · Answer 5 · answered Feb 23 '12 at 22:42

In grails 2.x you can also do:

grails.resources.modules = {
    core {
        dependsOn 'jquery, jquery-ui'
    }
}

in Config.groovy

Then in your GSP simply place the following in your HEAD element:

<r:require module="core"/>

The advantage is you can specify other CSS/JS files to depend on, makes it nice and clean in the GSP. This is also where you can override the versions of jQuery/jQuery-UI.

score 3 · Answer 6 · answered Sep 16 '12 at 18:22

I saw a good tutorial on that in icodeya. http://www.icodeya.com/2012/09/grails-different-ways-to-import.html

you can either do this in your gsp:

<g:javascript src="myscript.js"/ >

OR you can do this in your Config.groovy:

grails.resources.modules = {
core{
resource url:'/js/jQuery.js' 
} 
myScript { 
resource url:'/js/myScript.js' 
dependsOn 'core' 
}
}

then, in your gsp, you can attach this:

<r:require module="myScript" />

score 0 · Answer 7 · answered Nov 20 '14 at 20:24

I found (from the JQuery Plugin page) that in addition to using the <g:javascript library="jquery"/> tag, I had to add the plugin label explicitly to make the tag look like:

<g:javascript library="jquery" plugin="jquery"/>

Any idea why I had to use the plugin property?

score 0 · Answer 8 · answered Feb 18 '15 at 21:28

0

Currently, in 2015, all you have to do is add runtime ":jquery:1.11.1" to your BuildConfig.groovy, and that is all.

answered Feb 18 '15 at 21:28

lxknvlk

2,744
1
27
32

Salvador Valencia · Answer 9 · 2015-04-23T00:55:58.933

Update for Grails 2.3 This might help troubleshoot the configuration of jQuery so it can be available from your gsp pages.

First of all if you run the grails install-plugin jquery command it will fail with the 'install-plugin' obsolete message:

So most likely you already have it configured in your BuildConfig.groovy like this (note is runtime, not compile):

plugins {
    // ... some other plugins here ...
    runtime ":jquery:1:11:1"
}

If you are using Eclipse, do a File search for jquery and see if you already have the files:
Confirm that your js directory is not empty, it is located inside the web-app directory. If js has no files or directories then just copy them from what you got in in step 2:
As mentioned before, the combination of these two lines seems to work (at the top of your gsp pages):

enter image description here

If jQuery is not the very first javascript library to load you might have problems. Check your layouts/main.gsp file if you have one. You might need to add jquery to all your pages just so it is at the very top of your html source.

Hope that helps.

Note: At the time of this posting (April 2015) Grails 3.0 has been released and it appears to be incompatible with Grails 2.X projects in the way they are configured. Hopefully it will be better documented to avoid the issues with 2.X.

score 0 · Answer 10 · edited Jan 21 '12 at 21:34

0

<g:javascript library="jquery/jquery"/>

edited Jan 21 '12 at 21:34

Steve Kuo

61,876
75
195
257

answered Jan 21 '12 at 21:24

Wasim

896
7
24

put this string inside < />. I am considering that the jquery file name is jquery.js and it is inside js/jquery directory. – Wasim Jan 21 '12 at 21:27
Steve: I guess there is something wrong with the path u r providing. Can u please paste the complete path to the js file. – Wasim Jan 21 '12 at 21:39
My project doesn't have a `js/jquery/jquery.js` nor `web-app/js/jquery.js`. Is there some extra step I need to perform after `grails create-app` in order to enable/install jquery? – Steve Kuo Jan 21 '12 at 21:46
Steve: just follow the steps after grails create-app from the following link. http://grails.org/doc/latest/guide/gettingStarted.html#creatingAnApplication – Wasim Jan 21 '12 at 21:51
See Follow-up 2, `grails create-app` doesn't result in jquery.js in my apps's directory. – Steve Kuo Jan 21 '12 at 22:00
oh steve you have to download and add jquery.js in your app. Do one thing create a jquery.js file in your js directory and copy and paste the code from this link to that file http://code.jquery.com/jquery-1.7.1.js – Wasim Jan 21 '12 at 22:04
If I have to download and install jquery.js then what's the purpose of the Grails jquery plugin? – Steve Kuo Jan 21 '12 at 22:05
1

But steve your directory shows that no jquery plugin has been installed in your app, as there are no jquery files present there – Wasim Jan 21 '12 at 22:09
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/6929/discussion-between-charsee-and-steve-kuo) – Wasim Jan 21 '12 at 22:11