how to change id by adding new row..

[sam023]

i am making a table with dynamic increament of rows on click of button..!!

i have used an autocomplete textbox in a row...!!! which is based on textbox id..!!
.
.
as i know that id should be unique.. so how can i change ID then..?

function add(oRow) 
{ 
   var selObj = oRow.getElementsByTagName('select')[0];                
    if(selObj[0].selected){ // Check for empty ledger entry
        alert("Please select ledger");
        return false;
    }          
  oRow.parentNode.replaceChild(oRow.cloneNode(true),oRow.parentNode.insertRow(oRow.rowIndex+1));
 // alert(oRow.rowIndex+1);
  var inpR = oRow.getElementsByTagName('input');
  var inpN = oRow.nextSibling.getElementsByTagName('input');
  var selR = oRow.getElementsByTagName('select')[0];
  //alert(selR);
      selR.disabled=true;
  var selN = oRow.nextSibling.getElementsByTagName('select')[0];
      selN.selectedIndex=0; 
  for(i=0;i<inpR.length;i++)
  { 
    if(inpR[i].disabled){inpR[i].disabled=false;/**/};                      
    if(inpR[i].type=='text'){inpR[i].disabled=true;inpN[i].value='';inpN[i].disabled=false};
    if(inpR[i].value=='Add'){inpR[i].value='Edit';inpN[i].disabled=true};
  } sumus();knockOut(selN);
}

[sam023]

i hope people understood here what exactly i want to say..!! :O

[Airshow]

Sam,

If you never use document.getElementById on an element (or otherwise need to read its id) then it doesn't need one.

However, if an elememt does need an id, then as you say, it should be unique. One way to ensure uniqueness in a cloned element is to add a suffix, '_n' (where n is an integer). To ensure that "n" is unique, maintain an invisible counter in each of your table rows and increment it each time the row is duplicated.

Before duplicating the row:

var n = oRow.getAttribute('counter');
n = (n===null) ? 0 : n+1;
oRow.setAttribute('counter', n);

Now clone the row, then:

var suffix = '_' + n;
newRow.setAttribute('counter', 0);//Set to 0 in case the cloned row is itelf later cloned.

Now append suffix to all elements in the new row that need it.

New ids will be unique provided that each original id:is unique
is not of a value that could possibly occur due to the renumbering of another.
Airshow

[nish123]

can you tell where should i make changes in my code..?

[nish123]

actually i dont want to use ID...!! major reason is that i m also using a delete button which will delete the row..!!
.
.
this mean that again there can be same Id which will create problem..!! :(

[nish123]

function add(oRow) 
{ 
   var selObj = oRow.getElementsByTagName('select')[0];                
    if(selObj[0].selected){ // Check for empty ledger entry
        alert("Please select ledger");
        return false;
    }          
oRow.parentNode.replaceChild(oRow.cloneNode(true),oRow
.parentNode.insertRow(oRow.rowIndex+1));
  var inpR = oRow.getElementsByTagName('input');
  var inpN = oRow.nextSibling.getElementsByTagName('input');
  var selR = oRow.getElementsByTagName('select')[0];
  //alert(selR);
      selR.disabled=true;
  var selN = oRow.nextSibling.getElementsByTagName('select')[0];
      selN.selectedIndex=0; 
  for(i=0;i<inpR.length;i++)
  { 
    if(inpR[i].disabled){inpR[i].disabled=false;/**/};                      
    if(inpR[i].type=='text'){inpR[i].disabled=true;inpN[i].value='';inpN[i].disabled=false};
    if(inpR[i].value=='Add'){inpR[i].value='Edit';inpN[i].disabled=true}; 
  } sumus();knockOut(selN);
}

i have a code for autocomplete in one of the textbox in a row.. but for that i need ID..!!

but because of clone i m unable to enter different id..!! where should i maker change in my javascript..!!

[polo_coins]

I don"t think change ID is a good Idea because in a future you may use they "id" in another cases

[Airshow]

can you tell where should i make changes in my code..?

Intriguing I'm sure but this is Sam023's topic.Airshow

[sam023]

Intriguing I'm sure but this is Sam023's topic.

Airshow

Yes it is my topic but i can see that nish123 facing the same problem..!! and he also using same code as i do..!!!

so kindly help me out..!! where should i make changes..? in the code to create different id...!!

[sam023]

I don"t think change ID is a good Idea because in a future you may use they "id" in another cases

well i have no other option except changing ID..!!

as my auto complete function is based on id and ID must be unique..!!
.
.
as the user append the row... the clonenode function create exactly the same row as above including ID..!!! and that thing will create problem...!!!
.
.
can anyone suggest an auto complete function where ID is not required..?

[Luckychap]

If all is working fine then you can use rowIndex as generating id.

function add(oRow) 
{ 
   var selObj = oRow.getElementsByTagName('select')[0];                
    if(selObj[0].selected){ // Check for empty ledger entry
        alert("Please select ledger");
        return false;
    }          
  oRow.parentNode.replaceChild(oRow.cloneNode(true),oRow.parentNode.insertRow(oRow.rowIndex+1));
  var inpR = oRow.getElementsByTagName('input');
  var inpN = oRow.nextSibling.getElementsByTagName('input');
  // Setting id
  inpN.id = 'textBox_' + oRow.rowIndex+1;
  var selR = oRow.getElementsByTagName('select')[0];
      selR.disabled=true;
  var selN = oRow.nextSibling.getElementsByTagName('select')[0];
      selN.selectedIndex=0; 
  for(i=0;i<inpR.length;i++)
  { 
    if(inpR[i].disabled){inpR[i].disabled=false;/**/};                      
    if(inpR[i].type=='text'){inpR[i].disabled=true;inpN[i].value='';inpN[i].disabled=false};
    if(inpR[i].value=='Add'){inpR[i].value='Edit';inpN[i].disabled=true};
  } sumus();knockOut(selN);
}

[sam023]

inpN.id = 'textBox_' + oRow.rowIndex+1;

.
.
this code doesnt showing or creating any ID.. :O

[Airshow]

If all is working fine then you can use rowIndex as generating id.

That's fine the first time a row is cloned but on a second cloning of the same row, would it not generate an identical id to the first?

That's why I advocate maintaining a counter.Airshow

[Luckychap]

inpN.id = 'textBox_' + oRow.rowIndex+1;

. . this code doesnt showing or creating any ID.. :O

Sorry for typo it must be:

inpR.id = 'textBox_' + oRow.rowIndex+1

[Luckychap]

That's fine the first time a row is cloned but on a second cloning of the same row, would it not generate an identical id to the first?

That's why I advocate maintaining a counter.

Airshow

Well if rowIndex is same always, then inpN.length can be used to set ids:

inpR.id = 'textBox_' + inpN.length + 1;

If this does not work, you have to use some sort of counter as suggested by Airshow.

[sam023]

none of the code is working..
.
.
can anybody tell how to use counter..? :O

[Troy III]

... + i++

[sam023]

didnt get u.. :O
be more specific.. :)
thank you

[nish123]

I dont think it is possible to change Id.. by using CloneNode...!!

[Airshow]

Sam023,

Nish is right, CloneNode doesn't have an option for changing ID(s).

Have you tried the idea in my post #3 of this topic? It outlines a way (certainly not the only way) maintain a counter by which cloned elements can be force-renumbered for uniqueness.

Airshow