PDA

View Full Version : Very much Confusing - Detect HTML element ID



say2paul
24 Jan 2008, 2:43 AM
How to detect the HTML element ID dynamically?

I am using the following method to get the number of elements and the ID's of those element from their parent element??

In the following example, lets assume the child DIV ID names are not known to me. I just know the parent DIV ID name.

In any case I have to provide either contentEl or html to display the content in that particular panel. The problem is that I need the HTML content to be dynamically displayed in the panel.

Example HTML:

<div id="parent">
<div id="FirstEL" >
<div id="required1"></div>
<div id="required2"></div>
</div>
<div id="SecondEL"></div>
<div id="required3"></div>
<div id="required4"></div>
<div id="ThirdEL"></div>
</div>


Example JS:


items:[{
title: Ext.getDom('myhomeleft').childNodes[1].childNodes[1].innerHTML,
tools: tools,
html: Ext.getDom('myhomeleft').childNodes[1].childNodes[2].innerHTML
},{
title: Ext.getDom('myhomeleft').childNodes[2].childNodes[1].innerHTML,
tools: tools,
html: Ext.getDom('myhomeleft').childNodes[2].childNodes[2].innerHTML
}


The above JS is working fine in Internet Explorer but is giving error in Mozilla Firefox. Amazing isn't it?

The error is: Ext.getDom("myhomeleft").childNodes[1].childNodes[1] has no properties

I somehow managed to make it run on Mozilla Firefox by making a bit of change in the JS as below:



items:[{
title: Ext.getDom('myhomeleft').childNodes[3].childNodes[1].innerHTML,
tools: tools,
html: Ext.getDom('myhomeleft').childNodes[3].childNodes[2].innerHTML
},{
title: Ext.getDom('myhomeleft').childNodes[5].childNodes[1].innerHTML,
tools: tools,
html: Ext.getDom('myhomeleft').childNodes[5].childNodes[2].innerHTML
}


It is working fine in Mozilla now. But is now giving the error when I run it in Internet Explorer.

WHY???

Why and How childNodes[1] has to be childNodes[3] in Mozilla Firefox???

Condor
24 Jan 2008, 3:24 AM
That is because Firefox counts text nodes as children and IE doesn't.

Instead you could try:


items:[{
title: Ext.query('#myhomeleft > div:nth-child(1) > div:nth-child(1)')[0].innerHTML,
tools: tools,
html: Ext.query('#myhomeleft > div:nth-child(1) > div:nth-child(2)')[0].innerHTML
},{
title: Ext.query('#myhomeleft > div:nth-child(2) > div:nth-child(1)')[0].innerHTML,
tools: tools,
html: Ext.query('#myhomeleft > div:nth-child(2) > div:nth-child(2)')[0].innerHTML
}

say2paul
24 Jan 2008, 3:31 AM
That is because Firefox counts text nodes as children and IE doesn't.

Instead you could try:


items:[{
title: Ext.query('#myhomeleft > div:nth-child(1) > div:nth-child(1)')[0].innerHTML,
tools: tools,
html: Ext.query('#myhomeleft > div:nth-child(1) > div:nth-child(2)')[0].innerHTML
},{
title: Ext.query('#myhomeleft > div:nth-child(2) > div:nth-child(1)')[0].innerHTML,
tools: tools,
html: Ext.query('#myhomeleft > div:nth-child(2) > div:nth-child(2)')[0].innerHTML
}

Getting error on both the browsers:

Ext.query("#myhomeleft > div:nth-child(1) > div:nth-child(1)")[0] has no properties

Condor
24 Jan 2008, 3:49 AM
What is your exact DOM structure?


Ext.query("#myhomeleft > div:nth-child(1) > div:nth-child(1)")[0]

matches the first div child of the first div child of the element with id="myhomeleft".

say2paul
24 Jan 2008, 4:10 AM
What is your exact DOM structure?


Ext.query("#myhomeleft > div:nth-child(1) > div:nth-child(1)")[0]

matches the first div child of the first div child of the element with id="myhomeleft".

Good, working now..!

Being a premium member I'm still getting faster support from you. I think this is the best part of being a good developer like you.

Cheers!!