GreatWebGuy

Self-proclaimed greatness is a hard thing to prove

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






Contact Us

* required fields
* First Name:
* Last Name:
  Company:
  Phone:
  Fax:
* E-Mail:

Comments