Adding javasript property to a cell in dynamically added rows.

[sandeepdesai]

Hi.. i am new to javascripts,

i am using a addRow scipt to add rows to a table dynamically.

one of the cells(say cell2) in a Nth row needs to be hyperlinked to another script.

for example:
[code=javascript]
function addRow() // the add row script
{
var tbl=document.ge tElementById("t able");
var numRows=tbl.row s.length;
var newRow=tbl.inse rtRow(numRows);

//IDs
var secondCell=newR ow.insertCell(2 );
var box2=document.c reateElement('T D');
//textbox
var txtInp2=documen t.createElement ('input');
txtInp2.name="I Ds";
txtInp2.type='t ext';
txtInp2.value=" ";
//image
var link2=document. createElement(' <a href="#"onClick ="javascript:Po pup(this)">');

var image2=document .createElement( '<IMG align=middle border=0 src='find.gif'> ');
link2.appendChi ld(image2);
box2.appendChil d(txtInp2);
box2.appendChil d(link2);
secondCell.appe ndChild(box2);

// i am appending image to link , txtInp2 and link to the box, and box2 to //secondCell.
}
function Popup(obj)
{
currentRowIndex = obj.parentEleme nt.parentElemen t.rowIndex;
obj = document.form.I Ds;
if(obj.length != null)
{
window.Id=docum ent.form.IDs(cu rrentRowIndex-1);
}
else
{
window.Id=obj;
}

var urlString = <something>;
image=window.op en(urlString,"w idth=480,height =230,status");
image.focus();
}
[/code]
My problem is, if the table is already defined(if href to PopUp() specified in first row of table,declared in HTML, then link to PopUp(obj) is working , but if i add rows to the table dynamically using addRow(), the links to PopUp() in the new rows added are not working,
it gives a error msg telling either "object expected" or "parentElement. parentElement" ,or "length is null or not an object"

I dont know how to specify the 'this' in
var link2=document. createElement(' <a href="#"onClick ="javascript:Po pup(this)">');

PLZ help...!

[epots9]

Hi.. i am new to javascripts,

i am using a addRow scipt to add rows to a table dynamically.

one of the cells(say cell2) in a Nth row needs to be hyperlinked to another script.

for example:

function addRow() // the add row script
{
var tbl=document.ge tElementById("t able");
var numRows=tbl.row s.length;
var newRow=tbl.inse rtRow(numRows);

//IDs
var secondCell=newR ow.insertCell(2 );
var box2=document.c reateElement('T D');
//textbox
var txtInp2=documen t.createElement ('input');
txtInp2.name="I Ds";
txtInp2.type='t ext';
txtInp2.value=" ";
//image
var link2=document. createElement(' <a href="#"onClick ="javascript:Po pup(this)">');

var image2=document .createElement( '<IMG align=middle border=0 src='find.gif'> ');
link2.appendChi ld(image2);
box2.appendChil d(txtInp2);
box2.appendChil d(link2);
secondCell.appe ndChild(box2);

// i am appending image to link , txtInp2 and link to the box, and box2 to //secondCell.
}
function Popup(obj)
{
currentRowIndex = obj.parentEleme nt.parentElemen t.rowIndex;
obj = document.form.I Ds;
if(obj.length != null)
{
window.Id=docum ent.form.IDs(cu rrentRowIndex-1);
}
else
{
window.Id=obj;
}

var urlString = <something>;
image=window.op en(urlString,"w idth=480,height =230,status");
image.focus();
}

My problem is, if the table is already defined(if href to PopUp() specified in first row of table,declared in HTML, then link to PopUp(obj) is working , but if i add rows to the table dynamically using addRow(), the links to PopUp() in the new rows added are not working,
it gives a error msg telling either "object expected" or "parentElement. parentElement" ,or "length is null or not an object"

I dont know how to specify the 'this' in
var link2=document. createElement(' <a href="#"onClick ="javascript:Po pup(this)">');

PLZ help...!

try this:
[code=javascript]
var link2=document. createElement(' a');
link2.href = "#";
link2.onclick = function(){Popu p(this);};
[/code]

try that out and tell us how it goes,
good luck

[pbmods]

Heya, Sandeep. Welcome to TSDN!

Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

[sandeepdesai]

sorry..I tried what u suggested, but it is not working.

My full code with form element goes like this,might be there is some error in these too.

<script>
function(addRow)
{
	var tbl=document.getElementById("table");
	var newRow=tbl.insertRow(tbl.rows.length);

	<note>0th and 1st cell added,which are textboxes<note>

	var secondCell=newRow.insertCell(2);
	var txtInp2=document.createElement('input');
	txtInp2.name="ids"; //setting name to newly added cell.
	txtInp2.type='text';
	txtInp2.value="";
	   
     var link2=document.createElement('a');
     link2.href = "#";
     link2.onclick = function(){Popup(this);};
     link2.value=click;
 	secondCell.appendChild(txtInp2);
 	secondCell.appendChild(link2);
	tbl.appendChild(newRow);
}
function PopUp(obj)
{
currentRowIndex = obj.parentElement.parentElement.rowIndex;
		
		obj = document.form.ids;
		if(obj.length != null)// <NOTE> im getting an error here saying obj.length is null or not an object.<NOTE>
		{
			window.id=document.form.ids(currentRowIndex-1);
		}
		else
		{
			window.id=obj;
		}

		urlString = "\findId.jsp";
		newWindow=window.open(urlString,'find',"width=480,height=230");
		newWindow.focus();
}
</script>

and the FORM element goes like this..

<form name=form>
  <table id=table>
   <tr>
    <td><input type=textbox name=text1></td>
    <td><input type=textbox name=text2></td>
    <td><a href="#" onclick="PopUp(this)" value=click><input type=textbox name=ids></a></td>
  </tr>
 </table>

<input type=button onclick="addRow()">
</form>

I am getting the error when i click the link in the dynamically added rows.for the first row the pop up is working.Is there any error in the method i have used for naming the 2nd textbox??
i tried txtInp2.setAttr ibute('name','i ds')also but it did not work.
using alert(ids.lengt h)in the PopUp function also gives the same error.

again ,alert(document .form.ids.lengt h)gives 1.

THANKS..!!!!
sandeep.

[dmjpro]

You better to use parentNode instead of parentElement.
parentElement is only supported by IE, but parentNode supported by all browser.
Try it I think it will work fine.
Gud luck,

Kind regards,
Dmjpro.

[sandeepdesai]

You better to use parentNode instead of parentElement.
parentElement is only supported by IE, but parentNode supported by all browser.
Try it I think it will work fine.
Gud luck,

Kind regards,
Dmjpro.

Thanks.. I used parentNode instead of parentElement., but i am getting the same error..
I think i am not able to name the newly added text boxes in the rows generated by addRow() script.....

alert(document. form.ids.length ) is giving me 1,(first row already present in the form before adding rows..)
even after i add some extra rows by add row script.....i think there is some error in the method i have used for adding name attribute for 2nd textbox... I am not able to access them via their names.
i have used

function addRow()
{
      var secondCell=newRow.insertCell(2);
	var txtInp2=document.createElement('input');
	txtInp2.name="ids"; // is there any error in this?????????
	txtInp2.type='text';
	txtInp2.value="";

}

plzzzzzz help....
thanks and regards..
sandeep.

[dmjpro]

Thanks.. I used parentNode instead of parentElement., but i am getting the same error..
I think i am not able to name the newly added text boxes in the rows generated by addRow() script.....

alert(document. form.ids.length ) is giving me 1,(first row already present in the form before adding rows..)
even after i add some extra rows by add row script.....i think there is some error in the method i have used for adding name attribute for 2nd textbox... I am not able to access them via their names.
i have used

function addRow()
{
      var secondCell=newRow.insertCell(2);
	var txtInp2=document.createElement('input');
	txtInp2.name="ids"; // is there any error in this?????????
	txtInp2.type='text';
	txtInp2.value="";

}

plzzzzzz help....
thanks and regards..
sandeep.

You new row Created or not?
Please let me know first.

Kind regards,
Dmjpro.

[sandeepdesai]

ya... my new row is getting created without any error.......
only the link for pop up in the newly added rows is not working.... :(

[dmjpro]

ya... my new row is getting created without any error.......
only the link for pop up in the newly added rows is not working.... :(

I think these two lines reporting the error.

[code=javascript]
var link2=document. createElement(' <a href="#"onClick ="javascript:Po pup(this)">');
var image2=document .createElement( '<IMG align=middle border=0 src='find.gif'> ');
//These two line are wrong.
[/code]

[code=javascript]
var link2 =document.creat eElement('a');
link2.setAttrib ute('href','jav ascript:void(0) ');
link2.setAttrib ute('onclik','j avascript:Popup (this)');
var image2=document .createElement( 'img');
image2.setAttri bute('align','m iddle');
image2.setAttri bute('border',' 0');
image2.setAttri bute('src','fin d.gif');
//Replace those two line with these lines then see what happens.
[/code]

Best of luck with your try.

Kind regards,
Dmjpro.

[sandeepdesai]

Thanks for replying.
i tried what u suggested. But again i am getting the same error.
I there is a problem where i am assigning names to the text box (txtInp2.setAtt ribute('name',' ids');

I actually copied the two scripts from somewhere, and i think it works this way.

1.obj = document.form.ids;
// 1->This should give me list of all all form elements with name 'ids';

2.if(obj.length != null)
   window.id=document.form.ids(currentRowIndex-1);
 else
  window.id=obj;
//2-> this should set the value ' window.id' (got from jsp) to the textbox adjacent to the image which is clicked,since there are many textboxes with name "ids"

3.urlString = "find.jsp'	newWindow=window.open(urlString,"lookup","width=480,height=230);
	newWindow.focus();
//3-> this should open the find.jsp in a new window and focus on it from which user can select an id by clicking on a already existing id(jsp fetches list of existing ids when parameter 'lookup' is passed to it.)

I am getting a problem in line2, and the error is
"obj.length is null or not an object",
which means the script is not able to access the newly added textbox with name "ids".....

document.form.i ds shouldgive me all the form elements with name "ids",
but i am not able to get the newly added elements(textbo xes with name "ids") that are added to the form using addRow().

Is there any other method to get access to the form elements by name ?

thanks...!
regards,
sandeep.

[dmjpro]

Thanks for replying.
i tried what u suggested. But again i am getting the same error.
I there is a problem where i am assigning names to the text box (txtInp2.setAtt ribute('name',' ids');

I actually copied the two scripts from somewhere, and i think it works this way.

1.obj = document.form.ids;
// 1->This should give me list of all all form elements with name 'ids';

2.if(obj.length != null)
   window.id=document.form.ids(currentRowIndex-1);
 else
  window.id=obj;
//2-> this should set the value ' window.id' (got from jsp) to the textbox adjacent to the image which is clicked,since there are many textboxes with name "ids"

3.urlString = "find.jsp'	newWindow=window.open(urlString,"lookup","width=480,height=230);
	newWindow.focus();
//3-> this should open the find.jsp in a new window and focus on it from which user can select an id by clicking on a already existing id(jsp fetches list of existing ids when parameter 'lookup' is passed to it.)

I am getting a problem in line2, and the error is
"obj.length is null or not an object",
which means the script is not able to access the newly added textbox with name "ids".....

document.form.i ds shouldgive me all the form elements with name "ids",
but i am not able to get the newly added elements(textbo xes with name "ids") that are added to the form using addRow().

Is there any other method to get access to the form elements by name ?

thanks...!
regards,
sandeep.

Well.
Can you give me your whole HTML code and javaScript.
I will test it.And one more what you want, i mean what is your objective with this Page?
Ok Tell me everything about details.

Then i think I ll be able to solve your problem.

Kind regards,
Dmjpro.

[acoder]

You shouldn't use the same name for more than one element unless it's a set of checkboxes or radio buttons. Choose unique names. In any case, you can still get all elements with the name "ids" using [CODE=javascript]document.getEle mentsByName("id s");[/CODE]

[sandeepdesai]

You shouldn't use the same name for more than one element unless it's a set of checkboxes or radio buttons. Choose unique names. In any case, you can still get all elements with the name "ids" using [CODE=javascript]document.getEle mentsByName("id s");[/CODE]

@ DMJPRO... hi.. thanks..!! wil put on my html and javascript as soon as possible,.... since i will have to simplify them and also since i dont know how 'find.jsp' works....... mostly by calling the below code

urlString = "\find.jsp"
newWindow=window.open(urlString,"findId",'width=480,height=230');
	newWindow.focus();

i wil b passing the entered value in the current text box to the jsp(it compares if the filled in id with the existing ids) and then from jsp ill be getting back an existing id....But my problem is i am not able to access the particular textbox in the table....!!!!
Thanks!!!
@ acoder.
Thanks for the suggestion, Since i was not able to get te form elements in javascript (popup), i thought i will assign id attribute to the textboxes and now i am assigning the id to each textbox as

txtInp2.setAttribute('id','id'+numRows);
// numRows is the number of rows in table and since there is only one textbox in one row, the ids of all the textboxes with name "ids" will be different"

However,,, i came to know that in my script for popup, i am not able to access any newly added(via addRow() script) elements, either by their names or ids..!! :(
i tried the following code....

 function popUp(obj)
{
  currentRowIndex = obj.parentElement.parentElement.rowIndex;
  var tbl=document.getElementById('table');// i got access to the table,
  var currentRow=tbl.rows(currentRowIndex);// i got access to the current row,,
  var currentTxtBox=currentRow.getElementsByTagName("TD")[2];
       // i got access to the ids txtBox...!!!!
       // BUT.. when i did
	alert(currentTxtBox.name);
     // i got a null value.......... :( , i am supposed to get "ids" in alertbox..

I m not sure i am doing error in assigning name to the newly added cell.
currently working on that same.....

hope i wil figure out where im going wrong.....

[acoder]

@ acoder.
Thanks for the suggestion, Since i was not able to get te form elements in javascript (popup), i thought i will assign id attribute to the textboxes and now i am assigning the id to each textbox as

txtInp2.setAttribute('id','id'+numRows);
// numRows is the number of rows in table and since there is only one textbox in one row, the ids of all the textboxes with name "ids" will be different"

Good idea. Then use document.getEle mentById to access the element.

However,,, i came to know that in my script for popup, i am not able to access any newly added(via addRow() script) elements, either by their names or ids..!! :(
i tried the following code....

 function popUp(obj)
{
  currentRowIndex = obj.parentElement.parentElement.rowIndex;
  var tbl=document.getElementById('table');// i got access to the table,
  var currentRow=tbl.rows(currentRowIndex);// i got access to the current row,,
  var currentTxtBox=currentRow.getElementsByTagName("TD")[2];
       // i got access to the ids txtBox...!!!!
       // BUT.. when i did
	alert(currentTxtBox.name);
     // i got a null value.......... :( , i am supposed to get "ids" in alertbox..

The problem with that code is that you're getting the table cell (TD), not the input text box within the cell.

[sandeepdesai]

Good idea. Then use document.getEle mentById to access the element.

The problem with that code is that you're getting the table cell (TD), not the input text box within the cell.

Thanks..!!! Ya that was the problem,,!!
But please take a look at this code, i have modified it..
now i am using the following code.
I tried to alert the name of the 2nd textbox of the currentRow,( txtbox named "ids")
[CODE=javascript]
function PopUp(obj)
{
currentRowIndex = obj.parentEleme nt.parentElemen t.rowIndex;
var tbl=document.ge tElementById('t able');
var currentRow=tbl. rows(currentRow Index-1);

var secondCell=curr entRow.getEleme ntsByTagName('T D')[1];
var txtbox=secondCe ll.getElementsB yTagName('input ');
// till here everything is fine.
if(txtbox!=null )
{alert(txtbox.n ame);}
else
{alert("txtbox is null")}

//document.getEle mentById('ids'+ currentRowIndex )
// i tried assigning the ids to the textboxes and fetching them here,using the above method, but for some reason i dont know why,this method is not working in the popup.....!!

<note>window.op en etc i have excluded.<note>
}
[/CODE]

I am getting "undefined" in the alert box.
but i am quite sure i have reached the textbox,but i donno why i am not able to alert its name........
Plz tel me if i am going wrong somewhere,,....

@acoder.