LISTING 1: Index.cfm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>WDDX test</title>

<script type='text/javascript'>_cfscriptLocation = "model.cfm";</script>
<script type='text/javascript' src='core/engine.js'></script>
<script type='text/javascript' src='core/wddx.js'></script>
<script type='text/javascript' src='core/errorHandler.js'></script>

<script language="JavaScript">
	function testResult (r) {
		alert(r);
	}

	var oWddx = new WddxSerializer();
	var _o = {"myStruct": [
	        {"myEvent": "event 1", "method": "new", "regex": "^http://.*"},
	        {"myEvent": "event 2", "method": "delete", "regex": "^delete.*"},
	        {"myEvent": "event 3", "method": "random", "regex": "^random.*"}
	    ]
	};
	DWREngine._errorHandler =  errorHandler;
	DWREngine._execute
	(_cfscriptLocation, null, ' wddxTest', oWddx.serialize(_o), testResult);

</script>

</head>

<body></body>
</html>

LISTING 2: model.cfm

<cfinclude template="core/cfajax.cfm">
<cffunction name="wddxTest">
	<cfargument name="WDDXEncodedEvent">
	<cfset var event = "">
	<cfwddx action="WDDX2CFML" input="#URLDecode(WDDXEncodedEvent)#" output="event">
	
	<cfreturn URLDecode(WDDXEncodedEvent) />
</cffunction>

LISTING 3: Debugging

function loginResult (r) {
	for (var x in r) alert(x);
}

LISTING 4: Login HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>AJAX Login</title>

<script type='text/javascript'>_cfscriptLocation = "model.cfm";</script>
<script type='text/javascript' src='core/engine.js'></script>
<script type='text/javascript' src='core/wddx.js'></script>
<script type='text/javascript' src='core/errorHandler.js'></script>

<script language="JavaScript">
	function loginResult (r) {
		if (r[0] == 'false') {
			alert(r[1]);
			return false;
		} else {
			document.getElementById('LoginArea').innerHTML = 'logged in as ' + r[1] + '.';
		}
	}

	function doLogin() {
		var oWddx = new WddxSerializer();

		var frm = document.getElementById('loginFrm');
		var _o = {uname: frm.uname.value, pword: frm.pword.value};
		
		DWREngine._errorHandler =  errorHandler;
		DWREngine._execute(_cfscriptLocation, null, 'doLogin', oWddx.serialize(_o),
		loginResult);
	}

</script>

</head>

<body>

<div id="LoginArea">
	<form id="loginFrm">
		Username: <input type="text" name="uname"><br>
		Password: <input type="Password" name="pword"><br>
		<input type="Button" value="login" onclick="doLogin()">
	</form>
</div>


</body>
</html>

LISTING 5: doLogin ColdFusion Code

<cfinclude template="core/cfajax.cfm">
<cffunction name="doLogin" returntype="array">
	<cfargument name="WDDXEncodedEvent" type="string" />
	<cfset var event = "" />
	<cfset var returnArray = arrayNew(1) />
	
	<cfwddx action="WDDX2CFML" input="#URLDecode(WDDXEncodedEvent)#" output="event">
	
	<!--- logic here --->
	<cfif event.uname eq "admin" and event.pword eq "1234">
		<cfset returnArray[1] = true />
		<cfset returnArray[2] = "Rob Gonda" />
		<!--- update session --->
	<cfelse>
		<cfset returnArray[1] = false />
		<cfset returnArray[2] = "wrong user or password" />
	</cfif>
	
	<cfreturn returnArray />
</cffunction>

LISTING 6: Content Page.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>AJAX Login</title>

<script type='text/javascript'>_cfscriptLocation = "model.cfm";</script>
<script type='text/javascript' src='core/util.js'></script>
<script type='text/javascript' src='core/engine.js'></script>
<script type='text/javascript' src='core/wddx.js'></script>
<script type='text/javascript' src='core/errorHandler.js'></script>

<script language="JavaScript">
	function getConentResult (r) {
		document.getElementById('title').innerHTML = unescape(r[0].replace(/\+/g,  " "));
		document.getElementById('content').innerHTML = unescape(r[1].replace(/\+/g,  " "));
	}

	function getConent(c) {
		DWRUtil.useLoadingMessage();
		DWREngine._errorHandler =  errorHandler;
		DWREngine._execute(_cfscriptLocation, null, 'getConent', c, getConentResult);
		return false;
	}
	
</script>

</head>

<body onload="getConent('aboutUs');">

<table border="1" width="600">
	<tr>
		<td width="100" valign="top">
			<!--- side menu --->
			<a href="#" onclick="return getConent('aboutUs');">About us</a><br>
			<a href="#" onclick="return getConent('companyInfo');">Company
			Info</a><br>
			<a href="#" onclick="return getConent('ContactUs');">Contact
			Us</a><br>
		</td>
		<td>
			<div id="title"> </div>
			<div id="content"> </div>
		</td>
	</tr>
</table>



</body>
</html>

LISTING 7: Get Content Model

<cfinclude template="core/cfajax.cfm">
<cffunction name="getConent">
	<cfargument name="contentPage" type="string" />

	<cfset var returnArray = arrayNew(1) />
	<cfset var title = "" />
	<cfset var content = "" />
	
	<cfsavecontent variable="title"><cfoutput><h4>#arguments.contentPage#</h4>
	</cfoutput></cfsavecontent>
	<cfsavecontent variable="content"><cfoutput>
		<ul>
			<cfloop from="1" to="4" index="i">
				<li>#arguments.contentPage# #i#</li>
			</cfloop>
		</ul>
	</cfoutput></cfsavecontent>

	<cfset returnArray[1] = URLEncodedFormat(title) />
	<cfset returnArray[2] = URLEncodedFormat(content) />
	
	<cfreturn returnArray />
</cffunction>

LISTING 8: Building a table

<table width="700" cellpadding="2" cellspacing="0">
  <tbody id="mytable">
  </tbody>
</table>

function clear_table() {
	var l = document.getElementById('mytable').rows.length;
	for (i = 0; i < l; i++) {
	document.getElementById('mytable').removeChild
	(document.getElementById('mytable').rows[0]);
	}
}

    function showTable(o) {
		var r = [];
		r[r.length] = "uname";
		r[r.length] = "fname";
		r[r.length] = "lname";
        mytablebody = document.getElementById('mytable');
        for(j=0;j<o.uname.length;j++) {
            mycurrent_row=document.createElement('tr');
			for (var i = 0;i < r.length; i++) { // Loop thru array of fields
			mycurrent_cell=document.createElement('td'); // create td cell
			currenttext=document.createTextNode(eval('o.' + r[i] + '[j]')); 
			// create text field

			// link to edit user
			if (r[i] == "uname") {
			myLink=document.createElement('a'); // create A Link tag
			myLink.setAttribute('href',o.linkto[j]); // Add href link to A tag
			myLink.appendChild(currenttext); // Append Text to Link
					}

				if (r[i] == "uname") {mycurrent_cell.appendChild(myLink)} else
				{mycurrent_cell.appendChild(currenttext)}; // If first column, add A link,
				else add plain text field
				mycurrent_row.appendChild(mycurrent_cell); // append TD cell
			}
            mytablebody.appendChild(mycurrent_row); // append TR row.
        }
	sortTable('mytable',  0, false); // execute SORT by first column.
    }

LISTING 9: Related Options

function getBrand()
	{
		var brand = DWRUtil.getValue("brand");
		DWREngine._execute(_cfscriptLocation, null, 'makelookup', brand, getBrandResult);
	}



<cffunction name="makelookup" hint="type='keyvalue' jsreturn='array'">
		<cfargument name="brand" required="yes" type="string">
		<cfset model = ArrayNew(1)>
		<cfif arguments.brand eq "Nokia">
			<cfset ArrayAppend(model, "10, Nokia 7280")>
			<cfset ArrayAppend(model, "11, Nokia N-Gage")>
			<cfset ArrayAppend(model, "12, Nokia 7270")>
			<cfset ArrayAppend(model, "13, Nokia 7260")>
		<cfelseif arguments.brand eq "Motorolla">
			<cfset ArrayAppend(model, "20,E895")>
			<cfset ArrayAppend(model, "21,Motorolla V8")>
			<cfset ArrayAppend(model, "22,V150")>
			<cfset ArrayAppend(model, "23,Mpx100")>
		<cfelseif arguments.brand eq "Samsung">
			<cfset ArrayAppend(model, "30, Z130")>
			<cfset ArrayAppend(model, "31, Z700")>
			<cfset ArrayAppend(model, "32, X470")>
			<cfset ArrayAppend(model, "33, D488")>
		<cfelse>
			<cfset ArrayAppend(model, "0,Not Available")>
		</cfif>
		<cfreturn model>
	</cffunction>

function getBrandResult(modelArray)
	{
		DWRUtil.removeAllOptions("model");
		DWRUtil.addOptions("model", modelArray, "KEY", "VALUE");
	}