An AJAX email contact form using DWR and Scriptaculous

Coming from the Java Server side, my JavaScript skills are pretty limited, a lot of the AJAX frameworks still require a good deal of JavaScript, or wildly complex configurations, not to mention having to take into consideration how you plan to accept and answer the asynchronous calls on the server side. I needed a framework that was easy to configure, was at home in the Servlet Container, and could expose my existing API's to be called asynchronously.

I came across http://getahead.org and their AJAX framework, DWR, and found they had exactly what I needed and at the right price again, free.

Now down to the business of the article. The purpose here is to give some sample source that I worked through in following the directions on GetAhead's website. I had some issues following their directions and figured others might too, some things didn't seem to be working in their examples.

Source for this article is available here: testDWRContactForm.war

Step 1 - Download DWR and add it to your project lib directory
- Download dwr.jar

Step 2 - Add the configuration to load DWR to your web.xml

  dwr-invoker
  DWR Servlet
  org.directwebremoting.servlet.DwrServlet
  
debug
true
  


  dwr-invoker
  /dwr/*

Step 3 - Add dwr.xml to your WEB-INF directory

Step 4 - Create classes to be used by DWR

• I created a Contact class, which is a simple java bean which is specified in the Converter above
• I then created a ContactEmail class which validates the form data and sends the email

Step 5 - Start and test that the dwr installation picked up your ContactEmail class

• Start your server and load your localhost, ex. http://localhost/dwr/
• You should see your ContactEmail class listed here:

Step 6 - Add code and form to jsp or html file to talk to DWR

• The button on the form calls the writeContact() javascript method
• The first call the setValue() utility method of dwr to reset the value of the error message
• The second call uses the getValues() utility method to store the fields of the form in the contact javascript object, I found it important to set the person object up with the field names beforehand as seen in order for the method to getValues() method to populate the fields appropriately
• The checkFields local method is then called with the contact object
• In the checkFields method we call our DWR interfaced object with the contact object specifying reply as the callback function, this is another area where the DWR documentation seemed a little backwards
• The reply method is called automatically when the DWR call returns
• We then check for a "valid" message and determine whether we'll call the setContact method or display an error message
• There are also some minor DOM changes to give indication to the user what's going on
• The success method is called automatically when the DWR call returns from ContactEmail.setContact
• At this point we evaluate whether or not the message was sent successfully, if successful we use some Scriptaculous effects to have the contact form Fade Out and a Success message Appear

%MINIFYHTML6544c61b3431a593f737b8ee6e0719514%
Contact Us





* required fields


* First Name:




* Last Name:




  Company:




  Phone:




  Fax:




* E-Mail:











	Thank you, we'll be in touch shortly.