Question

In my Grails app, I’ve got a GSP that looks a bit like this:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1"><p>foo</p></div>
    <div id="tabs-2"><p>bar</p></div>
    <div id="tabs-3"><p>zip</p></div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#tabs").tabs();
    });
</script>

If I’ve understood it right, the jQuery tabs() call should make my “tabs” div look like a tabbed panel. Is that correct? If so, it’s not working. It just renders as a normal ul.

Any ideas?

Answer 1

I’d suggest just not bothering with the plugins for jQuery or jQueryUI. Instead just download the JS into your web-app/js folder. Then reference them using a traditional tag but also using the grails “resource” taglib, ala….

<script type="text/javascript" src="${resource(dir:'js',file:'jquery.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery-ui.js')}"></script>
<link rel="stylesheet" href="${resource(dir:'css',file:'jquery-ui.css')}" />

I like using plugins for many things, but for something as simple as a few JS libs, I just don’t see enough value. There is a tiny bit of value in having the jQuery plugin as it provides a grails class that implements jQuery support for the ‘remote*’ taglibs (ala http://grails.org/doc/latest/ref/Tags/submitToRemote.html), but I never use this anyways since I favor using jQuery directly.