I am using javascript to dynamically build a grid of input elements in HTML. Each row has 4 input elements and the user can add or delete rows as they need. Each time they add or delete a row, I am rebuilding the grid dynamically.
My problem is after I build the grid a second time, I cannot reference any of the elements. I believe the DOM now has 2 occurances of each element with the same name, and is confused when I try to reference by name.
My question: is there any way to reset the DOM listing of element names, so on each dynamic build the "resued" name is still unique ?
2 Answers 2
You can give the node ids a different unique prefix every time you create the grid and include that each time you reference a node by id.
Or you can change your code not to rebuild the whole grid every time.
However I think it might be that you've misdiagnosed the problem or I don't understand your question correctly. If you remember to remove the old table element from the document before inserting the new one, there should be no conflict over the ids or names.
Comments
Each row has 4 input elements and the user can add or delete rows as they need. Each time they add or delete a row, I am rebuilding the grid dynamically.
Why rebuild? Insert a new row in the DOM or delete the existing one. Not a problem.
Here is a sample html file that uses prototype to add / delete rows:
<html>
<head>
<style>
<!--
a,input{
margin: .2em;
}
-->
</style>
<script type="text/javascript"
src="http://api.prototypejs.org/javascripts/prototype.js"></script>
<script type="text/javascript">
function createGrid(id){
addRow($(id),0);
}
function deleteRow(elem, index){
elem.children[index].remove();
}
function addRow(elem, index){
var row = new Element('div',{'class':'row'});
for(var i = 0; i < 4; i++){
row.insert({
bottom: new Element('input',{'type':'text'})
});
}
row.insert({
bottom: new Element('a',{'href':'#'})
.update('Add Row')
.observe('click',function(event){
var row = Event.element(event).up();
var addIndex = $A(row.up().children).indexOf(row);
addRow(elem, addIndex);
Event.stop(event);
})
}).insert({
bottom: new Element('a',{'href':'#'})
.update('Delete Row')
.observe('click',function(event){
var row = Event.element(event).up();
var delIndex = $A(row.up().children).indexOf(row);
deleteRow(elem, delIndex);
Event.stop(event);
})
});
if(index > 0){
elem.children[index-1].insert({after:row});
}else{
elem.insert({top:row});
}
}
Event.observe(window,"load",function(){
createGrid('grid');
});
</script>
</head>
<body>
<div id="grid">
</div>
</body>
</html>
Copy / paste it to a new file and try it. I am sure you can easily port the functionality to whatever lib you are using.
document.getElementById()to reference the elements?getElementById) try saving the references while building the grid and re-use those references.