472,337 Members | 1,444 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,337 software developers and data experts.

Function wipes out components created dynamically


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">
  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);
  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);
  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);
  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);
  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);
  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);
  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. }
  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. }
  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. }
  91. function foo() {
  92.     alert("foo");
  93. }
  94. </script>
  96. <body>
  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>
  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>
Nov 17 '06 #1
2 3278
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>
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);
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);
Does anyone know how to accomplish that? Thanks in advance.

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

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

Similar topics

by: jr | last post by:
Sorry for this very dumb question, but I've clearly got a long way to go! Can someone please help me pass an array into a function. Here's a...
by: Joe | last post by:
Hi, Can I pass a "generic" class pointer as an argument to a function? For instance say classA and B are both derived from Z. { int iType...
by: Randell D. | last post by:
Folks, I'm sure this can be done legally, and not thru tricks of the trade - I hope someone can help. I'm writing a 'tool' (a function) which...
by: joltman | last post by:
OK, this is kind of hard to explain, so I'll do my best: I have a form where I have a row where there could be multiple entries, so I have a link...
by: Raphael Bauduin | last post by:
Hi, I'm looking at the logging of a database we'll put in production soon. I've seen some posts on this list about history tables, like mentioned...
by: drakuu | last post by:
All, I created dynamically part of a table and its components such as text boxes etc... As you can see in the example below I created txtAddress...
by: vega80 | last post by:
Hi. I have a problem with assigning an onkeypress-function to dynamically created input-boxes.I want to put the content of an input-field into a...
by: truptidalia | last post by:
Hello, I am trying to add 2 RadioButtons in a form in js dynamically. I can see 2 radiobutttons, but no text. On clicking them, their is no...
by: johnjsforum | last post by:
Buddies, I have a web page to create HTML buttons dynamically as in the “formDivColorPicker” function ...
by: concettolabs | last post by:
In today's business world, businesses are increasingly turning to PowerApps to develop custom business applications. PowerApps is a powerful tool...
by: teenabhardwaj | last post by:
How would one discover a valid source for learning news, comfort, and help for engineering designs? Covering through piles of books takes a lot of...
by: Kemmylinns12 | last post by:
Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and...
by: CD Tom | last post by:
This happens in runtime 2013 and 2016. When a report is run and then closed a toolbar shows up and the only way to get it to go away is to right...
by: Naresh1 | last post by:
What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge...
by: jalbright99669 | last post by:
Am having a bit of a time with URL Rewrite. I need to incorporate http to https redirect with a reverse proxy. I have the URL Rewrite rules made...
by: Matthew3360 | last post by:
Hi there. I have been struggling to find out how to use a variable as my location in my header redirect function. Here is my code. ...
by: AndyPSV | last post by:
HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computerHOW CAN I CREATE AN AI with an .executable...
by: WisdomUfot | last post by:
It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.