Home United States USA — software Better Scaffolding with jQuery – Part I

Better Scaffolding with jQuery – Part I

176
0
SHARE

Join the DZone community and get the full member experience.
Grails scaffolding works great out of the box. …

Join the DZone community and get the full member experience. 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. 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. We’re going to be using jQueryUI’s Dialog widget so you’ll need to grab a copy of jQueryUI. You can download it from here. The simplest thing is to just include everything and select a theme. Once you extracted the contents of the ZIP file place the jqueryui javascript file in your web-app/js directory and the entire theme folder under web-app/css. Then add the following to your main. gsp:
Modify any paths as necessary. Next you’ll need to go ahead and create the Event and Reminder domains. Once you’ve done that we just need the basic scaffolding for all the CRUD. We actually need to generate it (not using def scaffold = true) because we’ll need to modify some of the scaffolding code. So execute the following commands:
grails generate-all com. package. Event
grails generate-all com. package. Reminder
Go ahead and run your application and make sure things are working as expected. We’re going to focus the next part of our discussion on the edit page for Event. Go ahead and create an event and go to the edit form. It should look like this:
If you click Add Reminder right now you are going to be taken to the reminder create screen. What we want to do is change the behavior so that when Add Reminder is clicked a Dialog is shown with the Reminder form in it.

Continue reading...