This is an overview of building an Ajax search form using Grails and jQuery. Grails makes generating JSON from domain objects and collections objects extremely simple. jQuery and jQuery-jtemplates is an easy way to parse JSON and render predefined HTML templates with the results, rather than having to parse JSON and generate HTML on the fly, which can get ugly very quickly.

Step 1: Define the domain object in this case I have a domain object called ‘User’:

class User {
String username
String firstName
String lastName
Date dateOfBirth
String email
}


Step 2: Download JQuery and jquery-jtemplates JavaScript libraries, place them in the web-app/js directory.

Step 3: Create the search form GSP. You can download the full page here. For brevity I will only show the interesting parts of this page. First, you need to include the JQuery and jQuery-jtemplate libraries and use either Prototype, Yahoo, or Scriptaculous libraries for the “Ajaxed” Grails tags:

The jQuery.noConflict call allows for interoperability with other JavaScript libraries that may get confused with the ‘$’ that jQuery uses as a shortcut for ‘jQuery’.

The prototype library has been included to support the g:formRemote GSP tag that allows partial submits to the server:

The showResults(e) and showError() are JavaScript callbacks that will be called when either the response has completed succesfully or there was problem with the request. showResults will evaluate the JSON and pass that data to jQuery-template and apply that to the template file:

Step 4: Create the HTML template that the JSON results will be displayed in, here we have a simple table, userTable.tpl, which has been placed in the web-app/templates folder:

Step 5: Add search functionality to the UserContoller. Here we are building and executing an HQL query to get the search results, you could also use some of the other available GORM querying features to do this. You can return the collection of objects as JSON with one simple call to ‘render results as JSON’. We can also sort before rendering in the same line:

If your search query returns at least one User, you should see an html table appear inside of ‘resultDiv’ with a row for each User object.

Currently Grails supports the concept of view scaffolding that takes a domain object and generates standard GUI views for create, edit, list, and show operations on that object. It should not be difficult to add a similar scaffolding command to Grails that can generate jQuery-jtemplate template files based on a Grails domain object. The GSP’s could use remote tags to query the controller, whose response would be JSON, and then a little JavaScript to parse the JSON and render the response to the page.