jquery element not defined, but it used to skip it

Question

I recently transferred a site to a new host. Reloaded everything, and the javascript that worked fine before is breaking at an element it can't find. $('#emailForm') is not defined.

Now, the #emailform isn't on the page, but it wasn't before either, and JS used to skip this and it would just work. Not sure why this is happening. Any clues

Here is the site I am having the prblem:

http://rosecomm.com/26/gearwrench/

Answer 1

jQuery will return an empty jQuery object from $('#emailForm') if there isn't an element with the id='emailForm' .

One of the following is likely true:

• You forgot to include jQuery - therefore $ is undefined.
• There is another library included that uses $ - in which case you can wrap your code in a quick closure to rename jQuery to $

The Closure:

(function($){ 
   // $ is jQuery
   $('#emailForm').whatever();
})(jQuery);

You could console.log(window.$,window.jQuery); in firebug to check for both of these problems.

Answer 2

You have mootools-1.2.2-core-yc.js installed as well, and it is conflicting with jQuery.

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

$(document).ready(function() {

(function($){

 // bind 'myForm' and provide a simple callback function
 $('#emailForm').ajaxForm(function() {
     var txt=document.getElementById("formReturn")
     txt.innerHTML="<p>Thank You</p>";
 });
... 

$(document).ready is being called against the moo tools library instead of jQuery.

Answer 3

I'm not sure why it would be skipped before, but to avoid the error, wrap the statement(s) that reference $('#emailForm') in an if statement that checks to see if it is present:

if ( $('#emailForm').length ) {
    // code to handle $('#emailForm') goes here...
}