Dynamically building list boxes using javascript - problem

[fixthebug2003]

Hi,
I am building Listboxes using javascript dynamically on a page..something like this

sCell.innerHTML="<select \"style=\"font-family:helvetica;font-size:10px;width:160px\" onchange=\"changeMe(this)\"></select>";

where sCell is a cell of a Table. Now the problem is in the function changeMe which is declared like this:

function changeMe(pObj){
}

I don't get the object. I expect the listbox object should come in pObj..so I can write my code..! Can some one tell me how to accomplish the same..

fixthebug2003

 

[LFI]

Remove the \" in front of "style" and change other \" to single quotes. Try this and let us know if it helps.

--Dave

 

[vongrunt]

Check syntax twice - all these escapes and quotes can be tricky. In example above there is extra quote before style attribute.

 

[fixthebug2003]

Ya..I did that...actually after posting this question ..I noticed that and fixed it..but still I don;t get the object..in the changeMe function...I alerted the pObj and it is undefined !!

 

[LFI]

Did you try the single quotes? Does the sCell innerHTML actual fill with the SELECT list? Do you have any options in the list?

Please copy and paste exact code you have for filling the innerHTML.

--Dave

 

[cLFlaVA]

In the past I've never really been able to build form elements by setting the innerHTML of an object, and then attempt to access them programmatically. Rather, I've had to append the object after creating it in JavaScript.

Not sure if this is related to your problem, but it could be.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[vongrunt]

I just did a quick check:

<form>
<table>
<tr>
	<td>Testing...</td>
	<td id="foo"></td>
	<td><input type="button" value="Test it" onclick="insertSelect()"></td>
</tr>
</table>
</form>

<script language="javascript">
function insertSelect()
{	var sCell = document.getElementById("foo");
	sCell.innerHTML="<select style=\"font-family:helvetica;font-size:10px;width:160px\" onchange=\"changeMe(this)\"><option>...</option><option>1</option><option>2</option></select>";
}

function changeMe( oSel )
{	alert( oSel );
}

</script>

Works fine... IE, moz, whatever.

 

[cLFlaVA]

maybe i just suck then...




*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[LFI]

cLFlaVA,

Thanks! I didn't want to be the one to say it.

Where is that quote from?

--Dave

 

[cLFlaVA]

TV show called Family Guy. Funniest show ever.
Thanks for agreeing I suck. Makes the hours I spend wasting on this site worth while!

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[fixthebug2003]

I have the same code ...only difference being this code is in a iFrame ( I don't think that should matter)..!

In the changeMe function , when I alerted oSel.name, i get the name of the IFrame...that means it is putting the IFrame object for "this" keyword...weired?

 

[vongrunt]

Maybe not... show us minimal code that still doesn't work.

 

[fixthebug2003]

sCell.innerHTML="<select name=\"isel_carrier\" style=\"font-family:helvetica;font-size:12px;width:160px\" onchange=\"test(this)\"></select>";


function test(pObj){
alert(pObj.name);
}