Adobe 38043740 - ColdFusion Standard - Mac Development Manual page 1095

DEVELOPING COLDFUSION 9 APPLICATIONS
Using Web Elements and External Objects
Transferring data from the browser to the server
The following example serializes form field data, posts it to the server, deserializes it, and displays the data. For
simplicity, it only collects a small amount of data. In applications that generate complex JavaScript data collections,
you can extend this basic approach effectively. This example uses the
the data, and the tag to deserialize the data.
cfwddx
Use the example
1 Save the file under your web root directory, for example in wwwroot/myapps/ wddxserializedeserialze.cfm.
Display http://localhost/myapps/wddxserializedeserialze.cfm in your browser.
2
Enter a first name and last name in the form fields.
3
4 Click Next.
The name appears in the Names added so far box.
5 Repeat steps 3 and 4 to add as many names as you wish.
Click Serialize to serialize the resulting data.
6
The resulting WDDX packet appears in the WDDX packet display box. This step is intended only for test purposes.
Real applications handle the serialization automatically.
Click Submit to submit the data.
7
The WDDX packet is transferred to the server-side processing code, which deserializes it and displays the
information.
<!--- load the wddx.js file --->
<script type="text/javascript" src="/CFIDE/scripts/wddx.js"></script>
<!--- Data binding code --->
<script>
// Generic serialization to a form field
function serializeData(data, formField) {
wddxSerializer = new WddxSerializer();
wddxPacket = wddxSerializer.serialize(data);
if (wddxPacket != null) {
formField.value = wddxPacket;
}
else {
alert("Couldn't serialize data");
}
}
// Person info recordset with columns firstName and lastName
// Make sure the case of field names is preserved
var personInfo = new WddxRecordset(new Array("firstName", "lastName"), true);
// Add next record to end of personInfo recordset
function doNext() {
// Extract data
var firstName = document.personForm.firstName.value;
var lastName = document.personForm.lastName.value;
// Add names to recordset
nRows = personInfo.getRowCount();
personInfo.firstName[nRows] = firstName;
WddxSerializer
Last updated 1/20/2012
JavaScript object to serialize
1090