|
|
|
Ajax Demo - Javascript Updater - Form Letter
 Ajax Form Letter
turn on highlighting
|
turn off highlighting
Ronco Widgets Inc.
To: [fullName]
[streetAddress]
[addresscity]
[addressState]
[addressZipcode]
Dear [title] [lastName],
Thank you for purchasing a Roncomatic Slusher TM. The slusher will be an invaluable
addition to your kitchen. We are excited about the hours you will save by using
our slusher, [firstName].
Please take a moment to verify the billing/shipping information that you gave us. If any of the information is incorrect, please contact one of our customer service representatives at (800)-555-RNCO.
[fullName]
[streetAddress] [addresscity], [addressState] [addressZipcode] Phone: [phoneNumber], Mobile: [mobileNumber] Again, [title] [lastName], we thank you for your business and we hope you enjoy your purchase. Please feel free to call our customer service number any time 24 hours a day if you have any questions or problems with your new product.
Sincerely,
Gregory Flemming Explanation
This example illustrates generating a form letter with the selected person's information
sprinkled throughout. The person's information is retrieved each time via the Ajax engine.
In this flavor of usage, the AJAX response that comes
back to the page is of the form <response type="object" id="someObjectId">. The reponse
tells the ajaxEngine that there is a JavaScript object registered under the id 'someObjectId'
that has an ajaxUpdate() method.
The ajaxEngine invokes the ajaxUpdate method on the object and passes
the response XML. The XML approach allows the object to interogate structured data and update the
page in any way it sees fit. This approach is better suited for AJAX calls that might need to update
several portions of the screen, or do some processing to the data before it updates the page.
In this example, a struts action returns XML containing all of the information about the selected
person, and the object changes all of the relevant sections of HTML in the form letter. An example of the XML response
is shown below.
<ajax-response>
<response type="objeect" id="formLetterUpdater">
<person title="Mrs." fullName="Debbie Holloman"
firstName="Debbie" lastName="Holloman"
streetAddress="2243 Fallenwood Street" city="Dallas"
state="TX" zipcode="75555-3483"
occupation="Administrative Assistant"
phoneNumber="(214) 555-2343"
mobileNumber="(214) 555-2144"
personNotes="Has a house on the east-side by my cousin." />
</response>
</ajax-response>
Code
Registration
function initPage() {
formLetterUpdater = new FormLetterUpdater();
ajaxEngine.registerRequest( 'getPersonInfo', '/ajax_demo/ajax_person_info_xml' );
ajaxEngine.registerAjaxObject( 'formLetterUpdater', formLetterUpdater );
}
This above function is invoked when the page loads. It accomplishes two things. First,
it registers a request by giving it a logical name. The logical name 'getPersonInfo'
becomes the name for the request represented by the URL 'getPersonInfoXML.do'. Secondly,
the object with ID formLetterUpdater is registered with the ajax engine as an object that
can handle an object type ajax response.Sending the request function getPersonInfo(selectBox) {
var nameToLookup = selectBox.value.split(",");
var firstName = nameToLookup[1].substring(1);
var lastName = nameToLookup[0];
ajaxEngine.sendRequest( 'getPersonInfo',
"firstName=" + firstName,
"lastName=" + lastName );
}
This function is triggered by the onchange of the selectbox to the left. It simply
parses the first & last name from the selected item and passes that information to
the back-end request. The handling of the response is handled by the ajax engine.
In this case the response is XML that the engine routes to the formLetterUpdater
javascript onbject. |