"Creating Subforms" Vol. 1, Issue 5, p. 46
Using Inline Frames, JavaScript and WDDX to Represent a Ont-to-Many Relationship in an Elegant Manner
Listing 1: The Input Form
1 <html>
2 <head>
3 <title>Events List</title>
4
5 <script src="/cfide/scripts/wddx_sdk/wddx.js" language="javascript">
6 <script src="/cfide/scripts/wddx_sdk/wddxDes.js" language="javascript">
7
8 <script language="javascript">
9
10 mySerializer = new WddxSerializer;
11
12 var eventSponsorArray = new Array();
13 var counter = 0;
14
15 function addIt() {
16
17 if (document.form1.eventsponsortextbox.value == "") {
18 document.form1.eventsponsortextbox.focus();
19 alert("You must include a value in the text box!");
20 return false;
21 }
22
23 eventSponsorArray[ counter] = document.form1.eventsponsortextbox.value;
24 counter++;
25
26 document.form1.eventsponsortextbox.value = "";
27 frames.displayinlineframe.document.open();
28
29 buildFinalDisplay();
30
31 serializeIt();
32
33 document.form1.eventsponsortextbox.focus();
34 return true;
35 }
36
37 function buildFinalDisplay() {
38 var finaldisplay = "";
39 finaldisplay = "<table width=100% border=1
bordercolor=black>"
40 for(var i = counter - 1; i >= 0; i--){
41 finaldisplay = finaldisplay + "<tr><td><a href=
javascript:top.deleteFromArray(" + i + ")>" + 42
eventSponsorArray[i] + "</a></td></tr>";
43 }
44 finaldisplay = finaldisplay + "</table>";
45 frames.displayinlineframe.document.write(finaldisplay);
46 }
47
48 function serializeIt() {
49 myArrayInWDDX = mySerializer.serialize(eventSponsorArray);
50 document.form1.wddxpacket.value = myArrayInWDDX;
51 }
52
53 function deleteFromArray(item) {
54 document.form1.eventsponsortextbox.value =
eventSponsorArray[item];
55 document.form1.eventsponsortextbox.focus();
56 delete(eventSponsorArray[ item]);
57 tempArray = new Array();
58 counter = 0;
59 for (var i = 0; i < eventSponsorArray.length; i++) {
60 if (eventSponsorArray[i] != null) {
61 tempArray[counter] = eventSponsorArray[ i];
62 counter++;
63 }
64 }
65 eventSponsorArray = new Array();
66 eventSponsorArray = tempArray;
67 frames.displayinlineframe.document.open();
68 buildFinalDisplay();
69 serializeIt();
70 }
71
72 function initialize() {
73 if (document.form1.wddxpacket.value != "") {
74 MyArrayDeserializer = new WddxDeserializer;
75 eventSponsorArray = MyArrayDeserializer.deserialize
(document.form1.wddxpacket.value);
76 counter = eventSponsorArray.length;
77 buildFinalDisplay();
78 }
79 }
80
81 </script>
82
83 </head>
84 <body onLoad="initialize()">
85
86 <form method="post" action="action.cfm" name="form1">
87 Event Title:<br>
88 <input type="text" size=30 name="eventtitle">
89 <p>
90 Event Sponsor(s):<br>
91 <input type="text" size=30 name="eventsponsortextbox">
92 <input type="button" name="eventsponsorbutton"
onClick="addIt()" value=">>"><br>
93 <iframe name="displayinlineframe" width=250 height=75
marginwidth=0 marginheight=0 frameborder=0>
94 Your browser does not support inline frames.
95 </iframe>
96 <p>
97 <input type="hidden" name="wddxpacket" value="">
98 <input type="submit" value="Submit Event!">
99 </form>
100
101 </body>
102 </html>
Listing 2: The Action Template
1 <html>
2 <head>
3 <title>Events List Action</title>
4 </head>
5 <body>
6
7 <cftransaction>
8
9 <cfquery datasource="subforms" name="insertEvent">
10 INSERT INTO EVENTS(EVENTTITLE)
11 VALUES('#FORM.EVENTTITLE#')
12 </cfquery>
13
14 <cfquery datasource="subforms" name="getID">
15 SELECT MAX(EVENTID) AS theID
16 FROM EVENTS
17 </cfquery>
18
19 <cfwddx
20 INPUT = "#FORM.WDDXPACKET#"
21 OUTPUT = "thisArray"
22 ACTION = "WDDX2CFML"
23 >
24
25 <cfloop from="1" to="#ArrayLen(thisArray)#" index="counter">