getElementById doesn't work in IE when element is created after page load

mohtasham1983 · 02-07-2008, 05:52 PM

Hi,

I have a page with 3 tabs made from YUI tabview functions. The content of each tab is created using asynchronous request to the server.

When I try to find some of the elements inside each tab by using getElementByID, IE and Opera say it's a null element, while FF shows the correct element. I even tried a function in YUI to see if such element exist in a page, and it returned true in FF, but Opera and IE returned false.

PHP Code:


			
var score=YAHOO.util.Dom.hasClass('news_comment_796', 'divComment');    

alert(score);

Any idea how to find an element which is loaded in a page, after whole page is loaded?

leonscape · 02-08-2008, 05:22 PM

This can ber several things, are there two elements with the same id?
Are the names generated the same in all browsers? (Don't forget your dealing with three diffrent scripting engines here and they all have their quirks.)
Is the element set visible="false"? (Catches a lot of people out this one, thats why we have display:none )

You could also do a tagName search to check if its their at all.

Code:

function CheckId()
{
    var element = document.getElementById( "news_comment_796" );
    if( element != null )
    {
        alert( "Found element by getElementById" );
        return;
    }

    var elements = document.getElementsByTagName( "div" );
    for var i = 0; i < elements.length; ++i )
    {
        if( elements[i].id == "news_comment_796" )
        {
            alert( "Found element with id with search" );
            return;
        }
    }
    alert( "No matching Id Found" );
}

mohtasham1983 · 02-09-2008, 05:18 AM

Thank you for response. I'm using xslt to generate my html and I'm not much experienced in it.

I defined a simple div element with a fixed name inside my tab content and could found it in DOM using all browsers. That is, I realized there is something wrong with xslt, generating dynamic names for div element. I was assigning ID to each div element in xslt like the following which was causing the error:

PHP Code:


			
<div class="divComment">

<xsl:attribute name="id">                                

news_comment_<xsl:value-of select="news_id"/>    

</xsl:attribute>

</div>

What I did was to store the value of news_id in an xslt variable and then simply call its value like this:

PHP Code:


			
<div class="divComment" id="news_comment_{$news}">

</div>

I know that this post will remain in LQ forever. So I hope it helps anyone with similar problem.