Load grails action in jQuery-Tabs via AJAX

Question

I'm using the Tabs from jQuery UI in my Grails application.
In the different tabs, I want to display actions from a controller (so no static html site or so).

<script>
    $(function() {$("#tabs").tabs()
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <g:include controller="controller1" action="action1" />
    </div>
    <div id="tabs-2">
        <g:include controller="controller2" action="action2" />
    </div>
</div>

Is it possible to load these actions, or a gsp-site via AJAX?

There is an example on the jQuery-Website (http://jqueryui.com/demos/tabs/#ajax), but in this example they load just a static html site.

Answer 1

If you want your tab content to load dynamically when switching tabs, the Grails approach looks very similar to the jQuery-UI example. Just substitute createLink() for the .php links. Also, you were missing a closing brace & paren on your JavaScript init function (though this may have just been lost during copy/paste):

<script>
    $(function() { $("#tabs").tabs() });
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="${createLink(controller: 'controller2', action: 'action2')}">Tab 2</a></li>
        <li><a href="${createLink(controller: 'controller3', action: 'action3')}">Tab 3</a></li>
    </ul>
    <!-- Render content for first tab on initial page load, could also do this via jQuery -->
    <div id="tabs-1">
        <g:include controller="controller1" action="action1" />
    </div>
    <!-- divs for other tabs' content will be created automatically -->
</div>