User Guide

Using WDDX 881
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 very effectively. This
example uses the
WddxSerializer JavaScript object to serialize the data, and the cfwddx tag to
deserialize the data.
To use the example:
1. Save the file under your webroot directory, for example in wwwroot/myapps/
wddxserializedeserialze.cfm.
2. Display http://localhost/myapps/wddxserializedeserialze.cfm in your browser.
3. Enter a first name and last name in the form fields.
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.
6. Click Serialize to serialize the resulting data.
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.
7. Click Submit to submit the data.
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