CODEWITHSUNDEEP
jquerywordpress
LachlanF
LachlanF

Reputation: 121

wordpress enqueue script issues ("$ is not defined")

Hopefully this one is a pretty easy fix for you guys :)

I am building a wordpress theme, and had previously been fairly poorly calling the jquery script in the html head tag. This was causing some loading lag in Opera though, which I suspect is because I was trying to load jquery simultaneously in two ways... anyway I'm now doing it properly in the functions.php file, but my further script that depend on jquery is not playing nice.

here's the snippet of how I'm now enqueuing jquery and my script (for a sliding panel):

add_action('init', 'my_init');
function my_init() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2', true);
        wp_enqueue_script('jquery');
        wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js');
        echo "alert( 'Hello Admin!' );";
    }
}

and here's my sliding panel script:

$(document).ready(function(){
    $(".btn-slide").click(function(){
        var $marginLefty = $("#slide-panel");
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? 
        $marginLefty.outerWidth() :
        0
                        });
                                    });
                            });

this was all working a treat when I was just calling jquery in the head tags and then placing this script in script tags directly afterwards, but now firebug shows it throwing "$ is not defined" and changing $ to jquery produces "jquery is not defined"... can anyone help?

Upvotes: 12

Views: 16878

Answers (8)

Giulio Pierucci
Giulio Pierucci

Reputation: 121

var $=jQuery;

but you can use jQuery(function(){alert("Document Ready")});

Upvotes: 0

Mike
Mike

Reputation: 1266

The only way how I've fixed this issue was by replacing all "$" with "jQuery" in the script that you're including.

In your case your new script will look like this:

jQuery(document).ready(function(){
    jQuery(".btn-slide").click(function(){
        var jQuerymarginLefty = jQuery("#slide-panel");
    jQuerymarginLefty.animate({
      marginLeft: parseInt(jQuerymarginLefty.css('marginLeft'),10) == 0 ? 
        jQuerymarginLefty.outerWidth() :
        0
                        });
                                    });
                            });

Upvotes: 2

Ryan Taylor
Ryan Taylor

Reputation: 13425

I know this has already been answered but wanted to add to it.

If it's a file, most likely the problem is including jQuery as a dependency for your script. wp_enqueue_script('script_name', get_template_directory_uri() . '/path_and_script_name.js', array('jquery'));

If you have the jQuery object but not $ you can try this:

<script id="script-below-jquery-src">
(function($) {
   // Anything here can only immediately reference the DOM above it
   $(function(){
     //on DOM (document) ready
   });
})(jQuery);
</script>

This script belongs below the jQuery script tag.

If it still complains jQuery is undefined, check your <head> for the jQuery script, if it's not there you aren't registering/enqueuing it properly. In my case I'd added a filter that was removing all the tags. To debug you could use...

add_filter('script_loader_tag', function($tag, $handle){
  /*maybe echo/print here*/
  return $tag . "<!-- Script for handle '$handle' -->";
}, 10, 2);

But honestly that's not gonna be much more useful than just looking at your header.

Make sure you are using add_action('wp_enqueue_scripts', /*function name*/);. Many other hooks are too late.

Do not stick jQuery source above <?php wp_head(); ?> in the header. It's less maintainable, and especially with jQuery, likely that the script will be included twice if required by a plugin etc.

Upvotes: 1

Bruno Camarneiro
Bruno Camarneiro

Reputation: 555

Wrap your function in a so called "domReady" function:

<script>
(function($) {
   //insert function here
})(jQuery);
</script>

Upvotes: 1

Tom
Tom

Reputation: 689

If there is someone that is still having problems after those good hints please read details at http://codex.wordpress.org/Function_Reference/wp_enqueue_script

On that link you can find details for all kind of situations you can have.

And make sure that you call wp_enqueue_script for every JS script you are using. Never direct link them and you will be fine ;)

Upvotes: 1

Dave Cottrell
Dave Cottrell

Reputation: 292

You must ensure that jQuery is loaded first with the above mentioned array jQuery trick:

wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));

But it really is best practice to define a custom no-conflict variable like so:

var $j = jQuery.noConflict();

$j(document).ready(function() {
    $j(".btn-slide").click(function(){
        var $jmarginLefty = $j("#slide-panel");
        $jmarginLefty.animate({
            marginLeft: parseInt($jmarginLefty.css('marginLeft'),10) == 0 ? $jmarginLefty.outerWidth() : 0
        });
    });
});

Notice: You will need to replace any other use of $ or jQuery with $j. Also, any script appended after this one will also now need to follow your $j no-conflict definition.

Upvotes: 0

Darren
Darren

Reputation: 1533

make sure you indicate your script is dependent on jQuery by doing this in the wp_enqueue -> wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));

Notice the array('jquery') That indicates that your script is dependent on jQuery.

Upvotes: 14

Nick Craver
Nick Craver

Reputation: 630469

Use jQuery with a capital Q instead of $ to make it work. Wordpress usually includes a script which calls jQuery.noConflict() at the end, leaving $ undefined. The result should be something like this:

jQuery(function($) { //jQuery passed in as first param, so you can use $ inside
  $(".btn-slide").click(function(){
    var $marginLefty = $("#slide-panel");
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
    });
  });
});

Upvotes: 14

Related Questions