473,699 Members | 2,150 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Function wipes out components created dynamically

2 New Member

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 3382
2 New Member
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 Contributor
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 starting point. void TheMainFunc() { // Body of code... TCHAR myArray; DoStuff(myArray);
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;
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. When it completes, it can call a success, or a failure function. The names of these success, or failure functions will differ, and I'd like to know how I can pass the name of a function to my tool, and how my tool can call the function, using that...
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, and this can happen as many times as you click on the link. This row consists of 2 drop-down boxes. Depending on the selection of the first drop-down box, the second drop-down box is either disabled or enabled. The problem is on these dynamically...
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 http://www-106.ibm.com/developerworks/web/library/wa-dbdsgn2.html . I think I'll go that way too, but I still have some questions on the approach, and would appreciate any advice on it. Here are some questions I have: - is it possible to write only one function used for all logging...
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 point where I need to save the textbox input (normally I would use txtAddress.Text). But in my btnContinue_Click class I can't because It's out of the scope. Question: How can I access the dynamically created textboxes and save the inputs?
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 fine the first time (when the input-field is created in a non-dynamical way). The next input-field is created dynamically by a function that is called when the user hits enter (the previously generated input-field will be hidden). Then I'm trying...
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 retrive their vakue on button click. The form is added in a div which is present in html form (that is not dynamically created). Form & all other elements are created dynamically & appended to div elemetn whch is present in html. The code is : ...
by: johnjsforum | last post by:
Buddies, I have a web page to create HTML buttons dynamically as in the “formDivColorPicker” function //////////////////////////////////////////////////////////////////////////////////// version 1 : using global variables ////////////////////////////////////////////////////////////////// var _textField, _divColorPicker; // global vars window.onload = function() { _textField = document.getElementById('htxaMessage'); // fill...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.