Question

here’s the scenario:

I’m creating a page in the wordpress admin. I created a page called Contact Us, in the editor or WYSIWYG I made a form and a button. I want to use $.post in submitting the form.

Inside the editor:

<form>
    <input type="text" name="txt"/>
    <input type="button" id="btn" value="Save"/>
</form>

In the page.php, I included this code:

$(document).ready(function(){
    $('#btn').click(function(){
        alert('save');
    });
});

But there’s an error in the firebug console that say’s: ReferenceError: jQuery is not defined

What’s wrong with this? Or is this even possible?

Answer 1

This error:

ReferenceError: jQuery is not defined

Means that the jQuery namespace is not defined, it happens because you either forgot to include the jQuery lib, the client browser couldn’t find it in the specified address or the client browser is not compatible with jQuery (that error shows up on IE 5.5 even when the address is right).

Also, if you’re using WP’s embedded jQuery library, you can’t use $ to reference jQuery in the global scope as WP automatically sets it to noConflict mode. Taken from the docs:

Note: The jQuery library included with WordPress loads in “no
conflict” mode. This is to prevent compatibility problems with other
javascript libraries that WordPress can load.

You can create a closure to alias $ as jQuery then:

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

To use the embedded library, you should also include your scripts using wp_enque_script.

Check this post for more detailed info.

Obviously, you can also include it from the Google CDN and skip all those wp_enque_script and closure guidelines by adding/echoing the script tags directly which is what I’d personally do, but I didn’t say that! :)