473,322 Members | 1,398 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Function wipes out components created dynamically

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
2 3353
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
vssp
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

58
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 starting point. void TheMainFunc() { // Body of...
12
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 =1;
39
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 can be used generically in any of my projects. ...
2
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 where it will dynamically add another row like it,...
5
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 in...
1
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 textbox... Everything works perfectly until the...
1
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 tag-list when the user hits enter. This works...
1
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 selection. One of them is selected. I need to...
1
by: johnjsforum | last post by:
Buddies, I have a web page to create HTML buttons dynamically as in the “formDivColorPicker” function ////////////////////////////////////////////////////////////////////////////////////...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.