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

 
<html>

<head>

<title>Test</title>

<script type="text/javascript">
 
// mredkj.com

// 2005-11-17

function appendRow(tblStr) {

    var tbl = document.getElementById(tblStr);

    var row = tbl.insertRow(tbl.rows.length);
 
    // skill select cell

    var cell0 = row.insertCell(0);

    var skillSelect = document.createElement('select');

    skillSelect.options[0] = new Option('Select a Skill', '', true, true);

    skillSelect.options[1] = new Option('Assembler','assembler', false, false);

    skillSelect.options[2] = new Option('COBOL', 'cobol', false, false);

    skillSelect.options[3] = new Option('HTML', 'html', false, false);

    skillSelect.options[4] = new Option('Java', 'java', false, false);

    skillSelect.options[5] = new Option('JavaScript', 'javascript', false, false);

    skillSelect.options[6] = new Option('JCL', 'jcl', false, false);

    cell0.appendChild(skillSelect);
 
    // acquired date text cell

    var cell1 = row.insertCell(1);

    var acquiredDateInput = document.createElement('input');

    acquiredDateInput.setAttribute('type', 'text');

    acquiredDateInput.setAttribute('size', '20');

    cell1.appendChild(acquiredDateInput);
 
    // update date text cell

    var cell2 = row.insertCell(2);

    var updateDateInput = document.createElement('input');

    acquiredDateInput.setAttribute('type', 'text');

    acquiredDateInput.setAttribute('size', '20');

    cell2.appendChild(updateDateInput);
 
    // skill level select cell

    var cell3 = row.insertCell(3);

    var skillLevelSelect = document.createElement('select');

    skillLevelSelect.options[0] = new Option('Select Level', '', true, true);

    skillLevelSelect.options[1] = new Option('1','1', false, false);

    skillLevelSelect.options[2] = new Option('2', '2', false, false);

    skillLevelSelect.options[3] = new Option('3', '3', false, false);

    skillLevelSelect.options[4] = new Option('4', '4', false, false);

    cell3.appendChild(skillLevelSelect);
 
    // skill description select cell

    var cell4 = row.insertCell(4);

    var skillDescriptionSelect = document.createElement('select');

    skillDescriptionSelect.options[0] = new Option('Select Description', '', true, true);

    skillDescriptionSelect.options[1] = new Option('Unfamiliar','1', false, false);

    skillDescriptionSelect.options[2] = new Option('Familiar', '2', false, false);

    skillDescriptionSelect.options[3] = new Option('Experienced', '3', false, false);

    skillDescriptionSelect.options[4] = new Option('Seasoned', '4', false, false);

    cell4.appendChild(skillDescriptionSelect);
 
    // remove link cell

    var cell5 = row.insertCell(5);

    var removeLink = document.createElement('a');

    var text = 'remove';

    var textNode = document.createTextNode(text);

    removeLink.setAttribute('href', '');

    removeLink.addEventListener('click', foo, false);

    removeLink.appendChild(textNode);

    cell5.appendChild(removeLink);

}
 
function deleteLastRow(tblName) {

    var tbl = document.getElementById(tblName);

    if (tbl.rows.length > 2) {

        tbl.deleteRow(tbl.rows.length - 1);

    }

}
 
function getCells(tblStr, o0, o1, o2, o3, o4) {

    var tbl = document.getElementById(tblStr);

    var outTxt0 = document.getElementById(o0);

    var outTxt1 = document.getElementById(o1);

    var outTxt2 = document.getElementById(o2);

    var outTxt3 = document.getElementById(o3);

    var outTxt4 = document.getElementById(o4);

    var lastRow = tbl.rows.length - 1;

    outTxt0.value = tbl.rows[lastRow].cells[0].firstChild[tbl.rows[lastRow].cells[0].firstChild.selectedIndex].text;

    outTxt1.value = tbl.rows[lastRow].cells[1].firstChild.value;

    outTxt2.value = tbl.rows[lastRow].cells[2].firstChild.value;

    outTxt3.value = tbl.rows[lastRow].cells[3].firstChild[tbl.rows[lastRow].cells[3].firstChild.selectedIndex].text;

    outTxt4.value = tbl.rows[lastRow].cells[4].firstChild[tbl.rows[lastRow].cells[4].firstChild.selectedIndex].text;

}
 
function foo() {

    alert("foo");

}

</script>
 
<body>
 
<h1>Add Skill</h1>

<form>

<p>

<input type="button" value="Add" onclick="appendRow('tblBasic2');" />

<input type="button" value="Delete Last" onclick="deleteLastRow('tblBasic2');" />

<input type="reset" value="Reset" />

</p>

<table border="1" id="tblBasic2">

  <tr>

    <th>Skill Name</th>

    <th>Acquired Date</th>

    <th>Update Date</th>

    <th>Experience Level</th>

    <th>Description</th>

    <th>&nbsp;</th>

  </tr>
 
  <tr>

    <td><select>

        <option value="" selected>Select a Skill</option>

        <option value="assembler">Assembler</option>

        <option value="cobol">COBOL</option>

        <option value="html">HTML</option>

        <option value="java">Java</option>

        <option value="javascript">JavaScript</option>

        <option value="jcl">JCL</option>

        </select></td>

    <td><input type="text" id="addSkillAcquiredDateInput" size="20" value="" /></td>

    <td><input type="text" id="addSkillUpdateDateInput" size="20" value="" /></td>

    <td><select>

        <option value="" selected>Select Level</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

        </select></td>

    <td><select>

        <option value="" selected>Select Description</option>

        <option value="1">Unfamiliar</option>

        <option value="2">Familiar</option>

        <option value="3">Experienced</option>

        <option value="4">Seasoned</option>

        </select></td>

    <td><a href="" onclick="foo();">remove</a></td>

  </tr>

</table>

<p>

<input type="button" value="Get Cells From The Last Row" onclick="getCells('tblBasic2', 'txt0', 'txt1', 'txt2', 'txt3', 'txt4');" />

</p>

<p>

<label>Last Row Column 0

<input type="text" id="txt0" size="20" /></label>

</p>

<p>

<label>Last Row Column 1

<input type="text" id="txt1" size="20" /></label>

</p>

<p>

<label>Last Row Column 2

<input type="text" id="txt2" size="20" /></label>

</p>

<p>

<label>Last Row Column 3

<input type="text" id="txt3" size="20" /></label>

</p>

<p>

<label>Last Row Column 4

<input type="text" id="txt4" size="20" /></label>

</p>

</form>

</body>

</html>

Nov 17 '06 #1

Subscribe Post Reply

3278

jmarendo

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

 
function foo() {

  alert("foo");

  return false;

}

..

<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

removeLink.addEventListener('click', foo, false);

I know this isn't right, but this is what I need, essentially:

Expand|Select|Wrap|Line Numbers

removeLink.addEventListener('click', "return foo", false);

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

Similar topics

Passing an array of chars to a function

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...

C / C++

overloading a function

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...

C / C++

How can I have one function call another function dynamically?

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...

Javascript

Question: How to force a function to use the value of a variable when it's given rather than the current value of it

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...

Javascript

history tables with only one function?

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...

PostgreSQL Database

Accessing dynamically created components in C#

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...

ASP.NET

Assign onkeypress-function to dynamically created input-boxes

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...

Javascript

Unable to function Radio Button & Add Text Area in JS

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...

Javascript

DOM-dynamically-created HTML buttons and function argument passing problem

by: johnjsforum | last post by:

Buddies, I have a web page to create HTML buttons dynamically as in the “formDivColorPicker” function ...

Javascript

The Top 5 Skills You Need in a PowerApps Developer

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...

.NET Framework

List of Topmost 8 Electronics Engineering Forum Websites

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...

General

Benefits of Blockchain App Development for Enterprise Businesses

by: Kemmylinns12 | last post by:

Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and...

General

How to minimize a tool bar that shows up when in reports

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...

General

Basic concepts of WebLogic Admin training?

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...

Oracle Database

https redirect with reverse proxy

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...

IIS / Internet Information Server

How to layout php header location with a variable as the location?

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. ...

PHP

HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computer

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...

General

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...

General