Question

What would be the best way to display data from Grails database in JQuery UI tabs? What I would like is to have a tab interface and on each tab is a list of the records from a different domain. For instance, Tab1 displays the record list from Domain1, Tab2 displays the record list from Domain2, etc.

I have the JQuery UI tab interface set up and working and am currently using createLink to call the method from the controller to return the model of the appropriate domain. The tabs look like this:

<div id="tabs">
    <ul>
        <li><a href="${createLink(action: 'listHardware')}">Hardware records</a></li>
        <li><a href="${createLink(action:'listModel')}">Model records</a></li>
        <li><a href="${createLink(action:'listBuilding')}">Building records</a></li>

    </ul>       
</div>

The method from the controller looks like this:

def listHardware() {
    [hardwareList:Hardware.list(), hardwareInstanceTotal:Hardware.count()]      
}

I’ve also played around with rendering a whole GSP within the tab by using “render(view:’HardwareList’, model:[hardwareList:Hardware.list(), hardwareInstanceTotal:Hardware.count()]”, but that takes a VERY long time (at least 5 seconds) to load each time the tab is selected and is not at all ideal, especially if it were to take that long for each tab.

UPDATE

As noted in one of my answers to Rimero’s answer below, I was able to use templates to display tables of my domains’ data. I’m also trying to implement pagination on each tab using the tag, but each time I click on one of the pages to view another page, it takes me to the full template itself outside of the tab interface. Any thoughts on how to format the tag so that everything stays within the tab??

Answer 1

Here’s my suggestion:

• You can fetch everything at once in your controller in your index method for example.
• You can implement your tab contents as templates
  (g render template). Each tab == 1 template.
• You can fetch your domain objects buildingList,
  etc. from the index method of your controller.
• The g:render template code for each tab may only need to be passed a map or a collection for rendering.

In this case you don’t need hyperlinks to controllers endpoints. You just keep anchors to the tab(div id) as in the default example here -> http://jqueryui.com/tabs/.

UPDATED ANSWER

As you said that sending all the data at once takes a long time, you could fetch it asynchronously. If possible populate the data only for the first tab directly.

• Create a business method for each tab, that will return the model as JSON, data is only fetched if not already retrieved from the server (Need to keep state or see for example if the tab id has some DOM nodes.

• Using JQuery, when the DOM is ready, get the current tab and if you didn’t fetch the data for the first tab eagerly, fetch it at this moment with the busy image spinning.

• As soon as you select a new tab, you need to check if the data was already fetched, if not, you send an ajax call and your callback function populate the data in the tab div container for example.

Hope it helps.