By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,403 Members | 891 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,403 IT Pros & Developers. It's quick & easy.

Function wipes out components created dynamically

P: 2
Hello,

After reading through the "Table Basics - DOM - Refer to table cells" example at mredkj.com , I modified the code for my own purposes. In the modified version, I create a hyperlink and place it in the last cell of each row that I create dynamically using DOM methods.

Everything is working well (that is, just like the original example) except for something related to the function behind my link. The link simply calls a function (called foo()) that does nothing more than execute an alert statement. The problem is that when I activate the link from one of the rows that has been created dynamically, the function executes but after I hit the "OK" button, all of the components that were created dynamically disappear. That is, it appears as though the entire page is refreshed, or something similar, to the point that all of the dynamic content is wiped out.

In addition, if I happened to retrieve any values from the last row, those values are cleared out of the text boxes as well.

Does anyone know why this happens? Is it possible for me to prevent it, and if so, how do I do that?

Below is the source code. Please take a look and feel free to reply. Thanks.

By the way, I'm running the code in Firefox 1.0.6.

================
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Test</title>
  4. <script type="text/javascript">
  5.  
  6. // mredkj.com
  7. // 2005-11-17
  8. function appendRow(tblStr) {
  9.     var tbl = document.getElementById(tblStr);
  10.     var row = tbl.insertRow(tbl.rows.length);
  11.  
  12.     // skill select cell
  13.     var cell0 = row.insertCell(0);
  14.     var skillSelect = document.createElement('select');
  15.     skillSelect.options[0] = new Option('Select a Skill', '', true, true);
  16.     skillSelect.options[1] = new Option('Assembler','assembler', false, false);
  17.     skillSelect.options[2] = new Option('COBOL', 'cobol', false, false);
  18.     skillSelect.options[3] = new Option('HTML', 'html', false, false);
  19.     skillSelect.options[4] = new Option('Java', 'java', false, false);
  20.     skillSelect.options[5] = new Option('JavaScript', 'javascript', false, false);
  21.     skillSelect.options[6] = new Option('JCL', 'jcl', false, false);
  22.     cell0.appendChild(skillSelect);
  23.  
  24.     // acquired date text cell
  25.     var cell1 = row.insertCell(1);
  26.     var acquiredDateInput = document.createElement('input');
  27.     acquiredDateInput.setAttribute('type', 'text');
  28.     acquiredDateInput.setAttribute('size', '20');
  29.     cell1.appendChild(acquiredDateInput);
  30.  
  31.     // update date text cell
  32.     var cell2 = row.insertCell(2);
  33.     var updateDateInput = document.createElement('input');
  34.     acquiredDateInput.setAttribute('type', 'text');
  35.     acquiredDateInput.setAttribute('size', '20');
  36.     cell2.appendChild(updateDateInput);
  37.  
  38.     // skill level select cell
  39.     var cell3 = row.insertCell(3);
  40.     var skillLevelSelect = document.createElement('select');
  41.     skillLevelSelect.options[0] = new Option('Select Level', '', true, true);
  42.     skillLevelSelect.options[1] = new Option('1','1', false, false);
  43.     skillLevelSelect.options[2] = new Option('2', '2', false, false);
  44.     skillLevelSelect.options[3] = new Option('3', '3', false, false);
  45.     skillLevelSelect.options[4] = new Option('4', '4', false, false);
  46.     cell3.appendChild(skillLevelSelect);
  47.  
  48.     // skill description select cell
  49.     var cell4 = row.insertCell(4);
  50.     var skillDescriptionSelect = document.createElement('select');
  51.     skillDescriptionSelect.options[0] = new Option('Select Description', '', true, true);
  52.     skillDescriptionSelect.options[1] = new Option('Unfamiliar','1', false, false);
  53.     skillDescriptionSelect.options[2] = new Option('Familiar', '2', false, false);
  54.     skillDescriptionSelect.options[3] = new Option('Experienced', '3', false, false);
  55.     skillDescriptionSelect.options[4] = new Option('Seasoned', '4', false, false);
  56.     cell4.appendChild(skillDescriptionSelect);
  57.  
  58.     // remove link cell
  59.     var cell5 = row.insertCell(5);
  60.     var removeLink = document.createElement('a');
  61.     var text = 'remove';
  62.     var textNode = document.createTextNode(text);
  63.     removeLink.setAttribute('href', '');
  64.     removeLink.addEventListener('click', foo, false);
  65.     removeLink.appendChild(textNode);
  66.     cell5.appendChild(removeLink);
  67. }
  68.  
  69. function deleteLastRow(tblName) {
  70.     var tbl = document.getElementById(tblName);
  71.     if (tbl.rows.length > 2) {
  72.         tbl.deleteRow(tbl.rows.length - 1);
  73.     }
  74. }
  75.  
  76. function getCells(tblStr, o0, o1, o2, o3, o4) {
  77.     var tbl = document.getElementById(tblStr);
  78.     var outTxt0 = document.getElementById(o0);
  79.     var outTxt1 = document.getElementById(o1);
  80.     var outTxt2 = document.getElementById(o2);
  81.     var outTxt3 = document.getElementById(o3);
  82.     var outTxt4 = document.getElementById(o4);
  83.     var lastRow = tbl.rows.length - 1;
  84.     outTxt0.value = tbl.rows[lastRow].cells[0].firstChild[tbl.rows[lastRow].cells[0].firstChild.selectedIndex].text;
  85.     outTxt1.value = tbl.rows[lastRow].cells[1].firstChild.value;
  86.     outTxt2.value = tbl.rows[lastRow].cells[2].firstChild.value;
  87.     outTxt3.value = tbl.rows[lastRow].cells[3].firstChild[tbl.rows[lastRow].cells[3].firstChild.selectedIndex].text;
  88.     outTxt4.value = tbl.rows[lastRow].cells[4].firstChild[tbl.rows[lastRow].cells[4].firstChild.selectedIndex].text;
  89. }
  90.  
  91. function foo() {
  92.     alert("foo");
  93. }
  94. </script>
  95.  
  96. <body>
  97.  
  98. <h1>Add Skill</h1>
  99. <form>
  100. <p>
  101. <input type="button" value="Add" onclick="appendRow('tblBasic2');" />
  102. <input type="button" value="Delete Last" onclick="deleteLastRow('tblBasic2');" />
  103. <input type="reset" value="Reset" />
  104. </p>
  105. <table border="1" id="tblBasic2">
  106.   <tr>
  107.     <th>Skill Name</th>
  108.     <th>Acquired Date</th>
  109.     <th>Update Date</th>
  110.     <th>Experience Level</th>
  111.     <th>Description</th>
  112.     <th>&nbsp;</th>
  113.   </tr>
  114.  
  115.   <tr>
  116.     <td><select>
  117.         <option value="" selected>Select a Skill</option>
  118.         <option value="assembler">Assembler</option>
  119.         <option value="cobol">COBOL</option>
  120.         <option value="html">HTML</option>
  121.         <option value="java">Java</option>
  122.         <option value="javascript">JavaScript</option>
  123.         <option value="jcl">JCL</option>
  124.         </select></td>
  125.     <td><input type="text" id="addSkillAcquiredDateInput" size="20" value="" /></td>
  126.     <td><input type="text" id="addSkillUpdateDateInput" size="20" value="" /></td>
  127.     <td><select>
  128.         <option value="" selected>Select Level</option>
  129.         <option value="1">1</option>
  130.         <option value="2">2</option>
  131.         <option value="3">3</option>
  132.         <option value="4">4</option>
  133.         </select></td>
  134.     <td><select>
  135.         <option value="" selected>Select Description</option>
  136.         <option value="1">Unfamiliar</option>
  137.         <option value="2">Familiar</option>
  138.         <option value="3">Experienced</option>
  139.         <option value="4">Seasoned</option>
  140.         </select></td>
  141.     <td><a href="" onclick="foo();">remove</a></td>
  142.   </tr>
  143. </table>
  144. <p>
  145. <input type="button" value="Get Cells From The Last Row" onclick="getCells('tblBasic2', 'txt0', 'txt1', 'txt2', 'txt3', 'txt4');" />
  146. </p>
  147. <p>
  148. <label>Last Row Column 0
  149. <input type="text" id="txt0" size="20" /></label>
  150. </p>
  151. <p>
  152. <label>Last Row Column 1
  153. <input type="text" id="txt1" size="20" /></label>
  154. </p>
  155. <p>
  156. <label>Last Row Column 2
  157. <input type="text" id="txt2" size="20" /></label>
  158. </p>
  159. <p>
  160. <label>Last Row Column 3
  161. <input type="text" id="txt3" size="20" /></label>
  162. </p>
  163. <p>
  164. <label>Last Row Column 4
  165. <input type="text" id="txt4" size="20" /></label>
  166. </p>
  167. </form>
  168. </body>
  169. </html>
  170.  
Nov 17 '06 #1
Share this Question
Share on Google+
2 Replies


P: 2
I stumbled on part of the solution, but I don't understand it completely and still need some help, if available.

The first row in the example is preexistent, but clicking on the hyperlink would still remove any other rows that might have been created dynamically. I changed the foo() function to return false:

Expand|Select|Wrap|Line Numbers
  1. function foo() {
  2.   alert("foo");
  3.   return false;
  4. }
  5. ..
  6. <td><a href="" onclick="return foo();">remove</a></td>
  7.  
After doing that, activating the hyperlink in the first (that is, the preexistent) row didn't clear out other elements that were created dynamically. I think this has something do with "This forces the .. event handler to evaluate to return false, which preempts the actions of the href and target attributes (when JavaScript is turned on)" (Goodman, Dynamic HTML, The Definitive Reference, 107).

Not sure if I'm the right the track.

In any event, I'm trying to figure out how to modify the code that adds the onclick event listener dynamically so it knows to expect a return value.

Expand|Select|Wrap|Line Numbers
  1. removeLink.addEventListener('click', foo, false);
  2.  
I know this isn't right, but this is what I need, essentially:

Expand|Select|Wrap|Line Numbers
  1. removeLink.addEventListener('click', "return foo", false);
  2.  
Does anyone know how to accomplish that? Thanks in advance.

Jeff
Nov 17 '06 #2

100+
P: 268
Sorry I am not clear can u expline what u need ?
Nov 18 '06 #3

Post your reply

Sign in to post your reply or Sign up for a free account.