Tip of the Week : Javascript Dom Quirk In IE using getElementById
This is a fun one I found today - using getElementById() in IE7 to find a dom element on the page, if you are getting some interesting errors then one possibility is that you have two elements with the same id - or the same name attribute it seems.
The first thing to check really - have a look through the source code for another dom element of the same id. The generated source code if your page is dynamically creating some dom elements.
However, if you cannot find that then perhaps an element of the same name exists which is confusing IE and apparently some versions of Opera.
input name="unique_id"
can be returned when attempting to retrieve:
input id="unique_id"
So, hopefully you have found this solution and stopped swearing at the screen by now. This error can throw up all manner of interesting error codes depending on your javascript.
Another useful tip I found which made debugging this dom quirk a little easier was this one liner command for emptying the temporary files on IE7:
RunDll32.exe InetCpl.cpl,ClearMyTracksByProcess 8
This saved me a lot of mouse clicks!
Related posts:
- Tip of the Week : Nested Ternary Statement PHP
- Using NTFSClone.
- SEO London Event in Brighton
- Validate Unicode/UTF-8 Form Input (Language Specific Characters)
- Ajax Dropdown Example
As reported here:
http://webbugtrack.blogspot.com/2007/08/bug-152-getelementbyid-returns.html
This bug does affect IE6 and IE7, but is mostly fixed in the Beta of IE8 (there are still some issues)
Opera fixed their bug (a copy of the broken IE behavior) in version 9.25
PS If this is the first time you have been bitten by an IE bug like this, you’ll want to do some serious research on Web Bug Track. IE tops our list of DOM bugs.
Hi
Said plain & simple:
I’ve created an insertBefore() div on my page.
Together with the above I created a “delete” button calling a function to hide this created div(e.g myCreatedDiv).
The delete link works fine with div’s that was loaded with the page, but javascript displays an Error: Object Required when trying to delete(hide) the dynamically created div’s.
I also had a look at the source code of the page after the insertBefore() function was called, but couldn’t see the created div(it displays well on the page though)
My opinion is that the getElementById function cannot find the specified div (id = “myCreatedDiv”)created with insertBefore(), but it can find div’s that was loaded with the page.
How do i get past this error?
I think you should check that you are viewing the generated source code of the page after the javascript function is called, to ensure you are not viewing the original source code of the page.
I would also use firebug to inspect the DOM of the page, look for a generated div.
You should not have more than one element on the page with the same id, this will confuse the javascript no doubt, and as mentioned in this post you should not have a form with a name attribute that clashes with your id either.
Try playing around with other methods to retrieve the divs you add to the page, you could add classes to all of them then retrieve all the elements by class name (I’d use a library for this like YUI) and make sure that the divs are being added to the page and you can retrieve them. Then modify this method to add an id or what have you to each div which is unique and try retrieving divs with their unique ids.
Hope that helps