Javascript unable to find any part of the DOM

Question

I have noticed an interesting issue on a website that I am helping a friend with. When I am on the homepage I can use javascript/jQuery to access the DOM as expected and everything works fine. If I use the console and type console.log($('html')); it returns the html object from the site as expected.

However, if I do this exact same thing on any page other than the index, it returns null. The source of the page appears to be the same and I can see all the elements there, but javascript itself does not seem to be aware of them.

The site is built using the Typo3 CMS, if that could be part of it.

Does anybody have any experience with this? Or is there any way to tell javascript to re-read the DOM after the full page load?

EDIT Somebody asked for a link to the site so here it is: http://www.stinglonline.de/

Answer 1

You have a conflict between jquery and prototype. Add something along the lines of var $j = jQuery.noConflict(); and then update your jquery on that page to use the new $j variable such $j("html") and it should work for you. See: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

I tested this, in console, on http://www.stinglonline.de/haupt-menue/stingl-gmbh/profil.html.

Alternatively you can just use jQuery instead of the $, whichever works best for you.

Answer 2

Well it looks like the $ is part of the jquery library on http://www.stinglonline.de/top-menue/home.html

But the $ is part of the Prototype library on every other page.

You do not have this issue on the homepage because you do not use prototype there.

You should declare your prototype library BEFORE you declare you jquery library.

Answer 3

It looks like only the home page is running jQuery.
If you use native Javascript to select from the DOM it works just fine.

Give it a try:

document.getElementsByTagName('html');

That does the same thing in Javascript that $('html'); does in jQuery. There are a few Notes and things to consider When using this native Javascript method.

I find jQuery very useful, but without a proper understanding of native Javascript it becomes a crutch.

EDIT scrappedcola's Answer is correct I missed the jQuery tag in the code when I looked.

Answer 4

In the homepage, type $ in console(Chrome) as blow. It use jquery. So $('html') return document.getElementsByTagName('html').

>$
function (a,b){return new m.fn.init(a,b)}   jquery.js?1399526417:2

in other pages, type $ in console(Chrome) as blow. It use prototype. So $('html') return document.getElementById('html'), $('skiplinks') return document.getElementById('skiplinks').

>$
function $(b){
    if(arguments.length>1){
        for(var a=0,d=[],c=arguments.length;a<c;a++){
            d.push($(arguments[a]))
        }
        return d
    }
    if(Object.isString(b)){
        b=document.getElementById(b)
    }
    return Element.extend(b)
} 
prototype.1.7.0.yui.js:1

$('skiplinks')
<ul id=​"skiplinks">​…​</ul>​