Question

I’ve got a Roo generated webapp that I’m trying to put JQuery into (I know Roo uses Dojo but I figured I would try to get JQuery to work since I’m a bit more familiar with that).

Things I got working

I got a custom version of JQuery-UI from the theme builder, copied the scripts (base and ui js files) and CSS files into my app. I then copied the sample ‘index.html’ file that you also get which shows some of the widgets.

That all worked fine.

Things that don’t work (JQuery-UI)

My problems start when I try to integrate it into my own pages. I import all three files through various methods (using the ones I downloaded and also gave the online CDN (google-apis) a go). I also added the JQuery.noConflict() just to be sure it would co-exist with Dojo.

This works (the basic stuff)

$(document).ready(function($) { 
    alert('JQuery is working'); 
});

…but when I try anything with JQuery-UI, I am getting nowhere. For example,

$("#accordion").accordion({ header: "h3" });

I get this in Firefox (and a similar error in Chrome)

Error: $("#accordion").accordion is not a function

I’ve checked the view-source to see which URL it’s using for each three scripts, and pasted each one back into my browser to check that they are correct and e.g. not being blocked by Spring-security or anything else. All fine.

I’ve also tried making my own layout (with tiles) which completely bypasses any Dojo stuff that Roo might have added, still get the same error.

Also tried copying the JS/CSS files under /src/main/resources/META-INF and just directly under the webapp folder (where the images are) and adjusted the URLs accordingly.

I can only guess that it’s something to do with my pages being composed of tiles, and that’s preventing the JQuery-UI script from being loaded, and therefore it can’t find the accordion function (or any others for that matter).

I noticed in the source, that the accordion function has a ‘depends’ clause which lists the core and widget js files. Do I need to manually get these from somewhere too? (I noticed they are in the developer-bundle but the index.html file I mentioned works without explicitly ‘importing’ these…

I’ve been really impressed with Roo so far, it has saved me so much time (especially for the backend Java stuff). And from the way it’s designed I know that JQuery is possible (all the Dojo code is neatly put into the tagx files so easy to swap out), plus, I can see other people have got it working. So it’s just something I’m doing wrong, but I can’t quite figure out what it is.

If anyone can help, would really appreciate it, thanks!

Answer 1

@Richard I use both Dojo and jQuery in my app. I only use jQuery for Atmosphere integration, though, no UI.

I am loading the jQuery as such:
Add this to load-scripts.tagx:

<!-- jQuery URL -->
<spring:url value="/resources/jQuery/jquery-1.6.4.js" var="jquery_url" />
<spring:url value="/resources/jQuery/jquery.atmosphere.js" var="jquery_atmosphere_url" />

I do this around lines 14-ish. Later in the file, I do this:

<!-- jQuery scripts -->
<script type="text/javascript" src="${jquery_url}"><!-- required for FF3 and Opera --></script>
<script type="text/javascript" src="${jquery_atmosphere_url}"><!-- required for FF3 and Opera --></script>

I do this around line 42-ish. I am also loading 2 custom Dojo Widgets, and I am using Dojo 1.7.1 (CDN from google-apis) instead of the shipped Dojo 1.6. All of this I am doing in the load-scripts.tagx.