Need a DOM lesson on getElementsByTagName 2

[bubarooni]

I am having a problem with something I really don't seem to understand to well, DOM!

I am trying to modify some code I have on our company intranet. Right now the code retrieves a list of employees for a store thru sql and displays each employee in a div. I am trying to assign one of the fields (the employee id) as the id for each div I populate with the other field from the recordset which is the employee name.

This seems to work as there is no error being thrown on the page and it displays just as I expect it to. The thing is, I cannot verify this as the div id's value is not displayed anywhere.

To test this out I added a small popup alert on the mouseover that I thought would display the value of the div's id. All I get displayed on the popup though is '[object]'.

Is it just bad code or is this not possible? I eventually hope to get a real popup window that will display the employee's picture based on the div id's value, but need to make sure it is there now before I proceed.

Below is the code as it is now. Any suggestions will be greatly appreciated...

cellString = "<div id=" & objRS("employid") & " style=width:auto;padding-left:5px onmouseover=""style.backgroundColor='#264B88';style.color='#ffffff';alert(document.getElementsByTagName('id').item)"" onmouseout=""style.backgroundColor='#FFFFFF';style.color='#6699FF'"">" & objRS("Extension_List") & "</div>"

 

[kaht]

You should encapsulate all your html values with quotes. One of the first things that I notice immediately is that your id will not be encapsulated, and neither are your inline styles....

Secondly concerning your javascript, your are using getElementsByTagName incorrectly. That command returns an array of elements based on what tagname you pass as a parameter. So, assuming that it returns an array you are basically trying to alert the .item value from an array.

If you are only specifically trying to assure the correct IDs are getting set for each <div> then you could just as easily do a view-source from your browser and look at the generated HTML to ensure they are correct. If you'd rather get your javascript working correctly, then all you need to do is use the this reference in your javascript. Here would be your amended code (without fixing the other things I mentioned above)

cellString = "<div id=" & objRS("employid") & " style=width:auto;padding-left:5px onmouseover=""style.backgroundColor='#264B88';style.color='#ffffff';alert([!]this.id[/!])"" onmouseout=""style.backgroundColor='#FFFFFF';style.color='#6699FF'"">" & objRS("Extension_List") & "</div>"

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[cLFlaVA]

getElementsByTagName does just that - it retrieves a collection of all elements with the supplied tag name.

so, this:

[tt]var allDivs = document.getElementsByTagName("div");[/tt]

would give you a collection of DIV elements.

I think what you're looking for is [tt]document.getElementById(theId)[/tt]. with this function, you pass in an object's id, and you receive a handle on the object.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

poo.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[bubarooni]

hey! thanks for the quick response!

i was most definitely doing it both wrong and the hard way. i did the view -> source and they were all there.

i hate to broadcast my ingorance, but what does the quote encapsulation do?

 

[kaht]

All html properties should be encapsulated in quotes to ensure the widest range of browser support. Although IE may run your page just fine, some other browser that a user may stumble onto you page with may not run fine. HTML standards dictate that all values be placed inside quotation marks (for the sake of being lazy I'm not gonna hunt down the exact page where it's defined, but if you search around at

http://www.w3c.com

you will find it)

So, when viewing the source of your page all parameters on your HTML tags should be encapsulated something like this:

<div id=[!]"blah"[/!] style=[!]"height:10px;color:red"[/!] class=[!]"someCssClass"[/!] onclick=[!]"doSomething(this)"[/!]>

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[bubarooni]

i'll take your word on it! and act upon it to! thanks for your help.

 

[kaht]

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[bubarooni]

i hope you are up to going on with this just a bit more...

i tried your suggestion for the alert on the 'this.id' and it works, well, perfectly.

now, i had found this script that i wanted to use for the picture popups. when i hardcode the name of a jpg in, it works perfectly, but not when i try to use the 'this.id'.

i think it's concatenation, but can't figure it out for anything. i really want to make sure it is not something glaringly obvious, like impossible using the 'this.id' you shared with me yesterday.

hardcoded it works:

jkpopimage('/images/mcevk1.jpg', 163, 223, 'Employee Picture.'); return false

i have tried it about ten ways, here is how i'm doing it right now.

jkpopimage('/images/" & "(this.id)" & ".jpg'

here are a couple of more variations of the above and the results i get:

jkpopimage('/images/(" & "(this.id)" & ").jpg', 325, 445, 'Employee Picture.')
display popup, no pic

jkpopimage('/images/(" & "this.id" & ").jpg', 325, 445, 'Employee Picture.')
display popup, no pic

jkpopimage('/images/(" & this.id & ").jpg', 325, 445, 'Employee Picture.')
page won't load, object required: 'this' error

jkpopimage('/images/" & (this.id) & ".jpg', 325, 445, 'Employee Picture.')
page won't load, object required: 'this' error

Thanks In Advance

 

[kaht]

jkpopimage('/images/" & "(this.id)" & ".jpg'

I see that you're using ampersands to concatenate the string, so I'll assume that this is ASP and you're using VBScript to generate your html.

That said, it looks like in the above attempt that you are trying to kick out the id from your ASP code. this.id is a client javascript reference to the id of the element where the function is being called. This reference is not available from the server.

What exactly are you attempting to do? After making each server side change always do a view-source of the page so that you can see what is actually getting sent to the browser.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[bubarooni]

yes, it is asp. the 'alert(this.id) displays the proper employid on the alert popup.

each employee picture is named with the employid that is in the recordset that i assigned to the div id. i was hoping that by inserting that string in front of the .jpg it would display the picture.

hardcoded with the '/images/mcevk1.jpg' it finds and displays the picture with that employid, for everyone though since it is hardcoded.

Thanks Again

 

[bubarooni]

i tried it again and the popup looks like this when i hardcode that jpg's name in:

<html><title>Image Window</title><body bgcolor="lightskyblue"><img src="/images/mcevk1.jpg" style="margin-bottom: 0.5em"><br>Employee Picture.</body></html>

it looks like this when i try the 'this.id' thingy

<html><title>Image Window</title><body bgcolor="lightskyblue"><img src="0" style="margin-bottom: 0.5em"><br>Employee Picture.</body></html>

is this just an issue where the js can't talk to the vb and i need to go back to the drawing board?

 

[bubarooni]

AH HA! very nearly success!

this:

'/images/' + (this.id) + '.jpg'

produces:

<html><title>Image Window</title><body bgcolor="lightskyblue"><img src="/images/MCEVK1         .jpg" style="margin-bottom: 0.5em"><br>Employee Picture.</body></html>

that is almost it. i just need to get rid of those blank spaces at the end of the employid and i think it'll work.

 

[cLFlaVA]

i would trim that on the server side using ASP's native Trim() function.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[bubarooni]

Yep! RTRIM did the trick!

Thanks for your help!