Conflicting Javascript Errors: Null and Undefined function requests
While recently updating a website to use some slick jQuery drop down menus, I encountered some errors related to conflicting jQuery and Javascript functions. The scripts worked by themselves, but not together, so it was obviously a conflict of some kind. Being a jQuery and Javascript noob myself, I was somewhat lost with what to do and where to find the conflicting code.
My hunt brought me to discover the error console in Safari’s Web Inspector which is part of the free Safari Developer Tools. Most major browser have their own developer tools. Most web developers speak very highly of Chrome and Firefox web developer tools. IE has developer tools as well, but IE deserves to go the way of the dinosaur, so I recommend developing for browsers that follow the W3C guidelines. The Web Inspector is a must-have tool for web-designers.
In my case, the error console was informing me that:TypeError: 'null' is not an object (evaluating '$("ul.menu li").hover'). It pointed to the 3rd line of my menu.js code. Not knowing what this meant, I did what any fledgling coder would do – Google’d it. Many google searches a number of variations of code placement later, I came to the conclusion (Thanks to Laumania.net’s post jQuery-Error:’null’ is null or not an object for turning me in the right direction). The solution, which may seem simple to an experience javascript coder, was that the my menu.js file was asking for $("ul.menu li").hover(function() { when it should have been asking for jQuery("ul.menu li").hover(function() {. There were multiple instances of this happening in menu.js, so I changed each call jQuery and that fixed the conflict.
Not that I have a deep understanding of this issue, but the problem as I see it was that menu.js was calling for a variable using the “$” sign. Naturally, it was unsuccessfully looking for “.hover” in my other javascript files. When it didn’t find “.hover”, an error was returned. But when I told menu.js to specifically look for it in jQuery, it quickly found the functions it was looking for. I’m sure someone smarter than me can share more thoughts on the subject.
