General functions

createRow()

Adds a row to HTML table.

deleteRow()

Removes a row from HTML table.

wddxGetElement()

A WDDX serialized string is returned by any call to employee.cfc methods. This function extracts desired return message. E.g.: &amp;lt;wddxPacket version='1.0'&amp;gt;&amp;lt;header/&amp;gt;&amp;lt;data&amp;gt;&amp;lt;string&amp;gt;<strong>Salary must be a number!</strong>&amp;lt;/string&amp;gt;&amp;lt;/data&amp;gt;&amp;lt;/wddxPacket&amp;gt; Running function over this WDDX string, we get message 'Salary must be a number!'

httpRequest()

Call methods using XMLHttpRequest().

getColumnNames(tableObj)

Retrieves TH id's so they can be as arguments names when calling add and set methods.

<br />function getColumnNames(tableObj) {<br />   var theadObj = tableObj.getElementsByTagName('THEAD')[0];<br />   var trObj = theadObj.getElementsByTagName('TR')[0];<br />   var thObjs = trObj.getElementsByTagName('TH');<br />   var arrColumnNames = new Array;<br />   for (var i=1;i&amp;lt;thObjs.length;i++)<br />      arrColumnNames.push(thObjs[i].id);<br />   return arrColumnNames;<br />}<br />

A table object is used as a parameter. Function identifies THEAD object inside this table and, for the first TR, retrieves arguments names - TH's id, putting them into an array.

startEditing(trObj)

Transforms each cell (TD) in a row into a form field.

<br />function startEditing(trObj) {<br />   var arrColumnNames = getColumnNames(trObj.parentNode.parentNode);<br />   var tdObjs = trObj.getElementsByTagName('TD');<br />   tdObjs[0].innerHTML = <br />      '&amp;lt;a class="save" href="#" onclick="saveRecord(this);" ' + <br />      'title="Save this record"&amp;gt;&amp;lt;span&amp;gt;Save&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;';<br />   tdObjs[1].innerHTML = <br />      '&amp;lt;a class="cancel" href="#" onclick="cancelEditRecord(this);" ' +<br />      'title="Cancel editing"&amp;gt;&amp;lt;span&amp;gt;Cancel&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;';<br />   for (var i=2;i&amp;lt;tdObjs.length;i++)<br />      tdObjs[i].innerHTML = <br />         '&amp;lt;input type="text" name="'+arrColumnNames[i-2]+<br />         '" id="input-'+   arrColumnNames[i-2]+'" value="'+tdObjs[i].innerHTML+<br />         '" default="'+tdObjs[i].innerHTML+'"&amp;gt;';<br />   return false;<br />}<br />

Steps:

1. Gets arguments names
2. Finds all cells (TD's) inside TR object (function argument)
3. Changes links inside two first cells. From edit and delete to save and cancel
4. For all other cells, puts its content inside a form field

stopEditing(trObj,reset)

Transforms each form field into its primary or current value, according to boolean argument reset

<br />function stopEditing(trObj,reset) {<br />   var tdObjs = trObj.getElementsByTagName('TD');<br />   tdObjs[0].innerHTML = <br />      '&amp;lt;a class="edit" href="#" onclick="editRecord(this);" ' +<br />      'title="Edit this record"&amp;gt;&amp;lt;span&amp;gt;Edit&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;';<br />   tdObjs[1].innerHTML = <br />      '&amp;lt;a class="delete" href="#" onclick="deleteRecord(this);" ' +<br />      'title="Delete this record"&amp;gt;&amp;lt;span&amp;gt;Delete&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;';<br />   var inputObjs = trObj.getElementsByTagName('INPUT');<br />   for (var i=tdObjs.length-1;i&amp;gt;1;i--)<br />      if (reset) tdObjs[i].innerHTML = inputObjs[i-2].defaultValue;<br />      else tdObjs[i].innerHTML = inputObjs[i-2].value;<br />   return false;<br />}<br />

Steps:

1. Finds all cells (TD's) inside TR object (function argument)
2. Changes links inside two first cells. From save and cancel to edit and delete
3. For all other cells, sets its content to form fields properties value/defaultValue, according to reset value

newRecord(obj)

Used to create a new row at the end of the table and to make it editable. Code is quite simple, once it just calls createRow() and startEditing() functions.

<br />function newRecord(obj) {<br />   var trObj = createRow(obj);<br />   startEditing(trObj);<br />}<br />

editRecord(obj)

Used to make a row editable. Code is also quite simple, once it just gets TR oobject and calls startEditing() function.

<br />function editRecord(obj) {<br />   <span class="comments">//     A      TD         TR</span><br />   var trObj = obj.parentNode.parentNode;<br />   startEditing(trObj);<br />}<br />

cancelEditRecord(obj)

Used when user wnats to cancel all modifications he did to a row. If current row has an empty id, it menas it is a new row, so it should be removed calling deleteRow() function. Otherwise, stopEditing() function is called.

<br />function cancelEditRecord(obj) {<br />   <span class="comments">»//           A      TD         TR</span>    <br />var trObj = obj.parentNode.parentNode;<br />   var rowId = trObj.id;<br />   if ((rowId) &amp;amp;&amp;amp; (rowId != ""))  <span class="comments">»// reset all values</span><br />   stopEditing(trObj,true);<br />   else <span class="comments">»// remove TR from TABLE</span><br />   deleteRow(trObj);<br />}<br />

deleteRecord(obj)

Used to delete a row from the database.

<br />function deleteRecord(obj) {<br />   if (!confirm('Are you sure you want to delete this record?')) return;<br />   <span class="comments">//     A      TD         TR</span><br />   var trObj = obj.parentNode.parentNode;<br />   var rowId = trObj.id;<br />   var tableObj = trObj.parentNode.parentNode;<br />   <span class="comments">»// Call REMOVE method to delete record from database</span><br />var url = tableObj.id + '.cfc?method=remove&amp;amp;rowId=' + rowId;<br />   var response = wddxGetElement(httpRequest(url),'string');<br />   if (response!="") alert(response);<br />   else deleteRow(trObj);<br />}<br />

Steps:

1. Calls component's remove method, providing current row's id as argument
2. If a non empty string is returned, shows the error message. Otherwise, removes current row from HTML table calling deleteRow() function

saveRecord(obj)

Used to send all modifications to the database.

<br />function saveRecord(obj) {<br />   <span class="comments">»//           A      TD         TR</span>    <br />var trObj = obj.parentNode.parentNode;<br />   <span class="comments">»//              TR     TBODY      TABLE</span><br />var tableObj = trObj.parentNode.parentNode;<br />   var inputObjs = trObj.getElementsByTagName('INPUT');<br />   var rowId = trObj.id;<br />   var url = tableObj.id;<br />   <span class="comments">»// Call SET/ADD method to save record to the database</span><br />if ((rowId) &amp;amp;&amp;amp; (rowId != "")) <br />      url += '.cfc?method=set&amp;amp;rowId=' + rowId;<br />   else <br />      url += '.cfc?method=add';<br />   for (var i=0;i&amp;lt;inputObjs.length;i++)<br />      url += '&amp;amp;' + inputObjs[i].name + '=' + inputObjs[i].value;<br />   var response = wddxGetElement(httpRequest(url),'string');<br />   if (response.substr(0,2) != "id") alert(response);<br />   else {<br />      trObj.id = response.substr(3);<br />      stopEditing(trObj,false);<br />   }<br />}<br />

Steps:

1. Finds all form fields at current row
2. Defines which method, set or add - according to TR's id
3. Gets key-value pairs from form fields and sets up method calling url
4. If returned string is like "id:[id]", sets TR's id to returned id and calls stopEditing() function. Otherwise, shows error message