6

My grails application is using jquery-ui and twitter bootstrap plugin. I use the default application.js structure. Then I add the following line to include the jquery-ui and bootstrap.js :

...
//= require jquery
//= require jquery-ui
//= require bootstrap
...

The bootstrap.js in loaded properly, but the jquery-ui.js is not included.

Julius Prayogo
  • 133
  • 3
  • 12
  • And jquery loaded propely too? Verify that your directories has right names. Also you can try `require_tree` instead of `require` – wwarlock Jul 01 '14 at 11:16
  • Where do you placed `jquery-ui`? In the `./grails-app/assets/...` or in the `./web-app/...` ? – wwarlock Jul 01 '14 at 11:19
  • Thx wwarlock. Yes, the jquery loaded properly too. No I dont put the jquery-ui files, I use the jquery-ui plugin. I think the correct answer is because jquery-ui plugin 1.10.3 has no directive (Mario David's answer) – Julius Prayogo Jul 03 '14 at 08:27

3 Answers3

11

I had to use the following settings (for these versions):

grails-app/conf/BuildConfig.groovy

compile ":asset-pipeline:1.9.9"
runtime ":jquery:1.11.1"
runtime ":jquery-ui:1.10.3"

grails-app/assets/javascripts/foobar.js

//= require jquery
//= require js/jquery-ui-1.10.3.custom

grails-app/assets/stylesheets/foobar.css

/*
*= require themes/ui-lightness/jquery-ui-1.10.3.custom
*/
Nick Grealy
  • 24,216
  • 9
  • 104
  • 119
8

Assuming that you are using the jquery-ui grails plugin, it is not included, because the current version has no directive file under grails-app/assets/jquery-ui. Instead it uses the web-app directory, to put the javascript files in the subfolder jquery-ui/js as you see in the sources.

In order to get jquery-ui working you have to put the following line in your directive file:

//= require jquery
//= require jquery-ui/js/jquery-ui-1.10.3.custom.min
//= require bootstrap

In bootstrap it works out of the box, because they use a directive file under grails-app/assets/javascript as you see here.

Mario David
  • 1,595
  • 11
  • 19
  • Yes I use jquery-ui plugin, jquery plugin and twitter bootstrap plugin. Then which one is better using directive or using ? – Julius Prayogo Jul 03 '14 at 08:44
  • adding jquery-ui to the directive file is the better one, because it all gets loaded via one http request. This is because all entries in the directive file will be combined to just one file, that is referenced via html. Depending on you use case, another approach could be to not host jquery / jquery-ui at all by yourself, and let a cdn do the whole work. this makes a lot of sence, if you are a public side. For more information see here: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ – Mario David Jul 03 '14 at 10:55
  • 1
    Worked for me with //= require js/jquery-ui-1.10.3.custom – lrkwz Jul 05 '14 at 17:17
  • 3
    For some reason I had to remove jquery-ui path from you example to make it work, e.g.: //= require js/jquery-ui-1.10.3.custom.min – Cyrusmith Oct 13 '14 at 05:33
  • //= require jquery //= require ../jquery-ui/js/jquery-ui-1.10.4.custom.min //= require_tree . //= require_self I had to use the above declaration because of the jquery-ui plugin structure. You can see the same under plugins/jquery-ui-1.10.4/web-app/jquery-ui/js/jquery-ui-1.10.4.custom.min.js Actually the path referenced by jquery-ui/js/jquery-ui-1.10.4.custom.js came out to be /plugins/jquery-ui-1.10.4/js/jquery-ui/js/jquery-ui-1.10.4.custom.js which is wrong and that is why you had to go a level up. – Nikhil Sharma Mar 16 '15 at 06:59
0

this line also worked for me : 

  //= require jquery-ui/js/jquery-ui-1.10.3.custom.min
treize
  • 67
  • 2