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
10 answers
solution1
27 ACCPTED 2012-01-21 22:59:48
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>
solution2
5 2012-01-21 22:15:12
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' />
solution3
5 2012-01-21 22:23:47
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/
solution4
4 2014-07-23 07:23:25
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)
solution5
4 2012-02-23 22:42:08
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.
solution6
3 2012-09-16 18:22:39
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" />
solution7
0 2014-11-20 20:24:15
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?
solution8
0 2015-02-18 21:28:09
目前，在2015年，您所要做的就是在BuildConfig.groovy中添加runtime ":jquery:1.11.1" ，就是这样。
solution9
0 2015-04-23 00:35:01
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 jquerycommand 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
jsdirectory is not empty, it is located inside theweb-appdirectory. Ifjshas 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):
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.
solution10
0 2012-01-21 21:24:15
<g:javascript library="jquery/jquery"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.