Better Scaffolding with jQuery – Part I

Grails scaffolding works great out of the box.  Today I want to see how we can improve adding data to the many side of a one-to-many relationship using jQuery, jQueryUI's Dialog, and some Ajax.  Using the same domain objects as my previous article I want to show how we can add Reminders to an Event without needing to navigate to a new page, assuming it is ok to create events without reminders.  For the sake of clarity, here are the domain objects.

class Event {

  String name

  static hasMany = [reminders: Reminder]

  static constraints = {
  }
}

class Reminder {

  ReminderType reminderType
  Integer duration

  static belongsTo = [event:Event]

  static constraints = {
  }

  String toString() {
    "${reminderType} : ${duration}"
  }
}

Note that in Reminder I've added a ReminderType.  This is a simple Enum with the values Email and SMS.  I did this to add a bit of meat to the Reminder form.  Once you have a new grails application up and running you'll need to download a couple of things.  The first is jQuery.  The easiest way to get this in grails is to simply install the plugin.  Execute "grails install-plugin jquery" and then in the views/layout/main.gsp modify the g:javascript tag to use "jquery" instead of "application" for the library attribute.