WordPress enqueue noConflict() error $ not a function?

Question

Been a WP dev for 8 years, this problem has never gone away and it's driving me insane. $ is not a function always show up, or jQuery is not a function, or foundation is not a function ... someone help me nip this in the bud once and for all?

My enqueue.php:

// initialize packages ...
function source_enqueue() {

    // init $wp_styles variable
    // adds conditional wrapper around ie stylesheet
    global $wp_styles;
    if (!is_admin()) {

        // jquery, bower, foundation, app js, style, app css

        // init jquery ...
        wp_enqueue_script( 'jquery' );
        // init foundation
        wp_enqueue_script( 'foundation', 'https://cdn.jsdelivr.net/g/foundation@5.5.1(js/foundation.min.js+js/vendor/fastclick.js+js/vendor/jquery.cookie.js+js/vendor/jquery.js+js/vendor/modernizr.js+js/vendor/placeholder.js),camanjs@4.1.2', array(), '2.1.3', true );
        // init normalize
        wp_enqueue_style( 'foundation', 'https://cdn.jsdelivr.net/g/foundation@5.5.1(css/normalize.css),fontawesome@4.4.0,animatecss@3.4.0', array(), '', 'all' );
        // init app.min.js
        wp_enqueue_script( 'app', get_template_directory_uri() . '/assets/dist/app.min.js', array( 'jquery' ), '', true );
        // init app.min.css
        wp_enqueue_style( 'app', get_template_directory_uri() . '/assets/dist/app.min.css', array(), '', 'all' );
        // init style.css
        wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), '', 'all' );

        // init comment reply ...
        if ( is_singular() AND comments_open() AND (get_option('thread_comments') == 1)) {
            wp_enqueue_script( 'comment-reply' );
        }

    }

}

// init source_enqueue() ...
// - - - - - - - - - - - - - - - - -
add_action( 'init', 'source_enqueue' , 999 );

My app.js:

$.noConflict();
$(document).foundation();

I have tried wrapping it in different functions to no avail:

jQuery(document).ready(function(){
    jQuery(document).foundation();
});

or:

$(document).ready(function(){
    $(document).foundation();
});

Nothing works. The error still remains: $ is not a function.

Someone help me solve this once and for all before I go mad and throw my nice desktop into a woodchipper?

Does jquery.min.js (or equivalent) is loaded BEFORE your script(s) ? — nicolallias, Oct 20 '15 at 13:57
technically WP jQuery is loaded, then the CDN is loaded all at once and parsed through jQuery v 2.1.3. It shouldn't affect it, and if I were to load them all individually (as I have for years) the problem still persists. I've simply ignored it until now. — Alexander Graham, Oct 20 '15 at 13:58
technically... have you checked it? (through developper console) — nicolallias, Oct 20 '15 at 13:59
does another library like prototype is loaded after the cdn stuff? — nicolallias, Oct 20 '15 at 14:00

score 2 · Accepted Answer · answered Oct 20 '15 at 18:11

I found the answer, after years of digging, testing, and trials. I decided to give this one last shot and it worked. No errors, and the console registers foundation. To all those who have struggled, this is the code that will let your enqueue'd foundation script work properly. I'll even provide the CDN.

requires 2 days before I can accept my own answer.

enqueue.php / functions.php, however you require your functions:

// enqueue.php or functions.php
wp_enqueue_script( 'foundation', 'https://cdn.jsdelivr.net/g/foundation@5.5.3(js/foundation.min.js+js/vendor/jquery.js+js/vendor/modernizr.js),scrollreveal.js@0.1.2', array(), '', true );

app.js:

// app.js
$ = jQuery.noConflict( true );

(function( $ ) {
    $(document).foundation();
    // other code here ...
})(jQuery);

I don't think you need the `$ = jQuery.noConflict( true );` part at all. At least I never use it - I only use the other part of your code - where I create an anonymous function with a $ parameter and I call it with jQuery. This defines `$` as a variable for `jQuery` within the scope of the function(so I put all of my code in that function). Give it a try and let me know if it works(it should :) ). — Nikola Ivanov Nikolov, Oct 21 '15 at 07:24

score 0 · Answer 2 · answered Oct 20 '15 at 14:04

0

Why do you enqueu 'jquery'. jQuery is always enqueue by Wordpress.

Remove wp_enqueue_script( 'jquery' );

And in your js file

jQuery(document).ready(function($){
    //then $ works
    // your code
});

answered Oct 20 '15 at 14:04

Nozifel

535
2
9

`n(...).foundation is not a function` still throws error. `jQuery(document).ready(function($){ $(document).foundation(); });` – Alexander Graham Oct 20 '15 at 14:18

score -1 · Answer 3 · edited Oct 22 '15 at 00:14

-1

Just add jQuery.js or jQuery-min library and try this:

     $k = jQuery.noConflict();
     $k(document).ready(function(){
         //then $ works
         // your code
     });

edited Oct 22 '15 at 00:14

Barett

5,826
6
51
55

answered Oct 20 '15 at 14:31

Viswa

26
2

score -2 · Answer 4 · answered Oct 20 '15 at 14:00

-2

"include" standard jquery url in top of the page...

answered Oct 20 '15 at 14:00

Krishna Gupta

695
4
15

I've cdn'ed this via enqueue before but I am not putting a `link src="jquery"` in my header. I am going to enqueue it properly but even still I am unsure why the error remains. And again, jQuery is loaded through WP core in first enqueue. – Alexander Graham Oct 20 '15 at 14:01
Krishna, Alexander Graham thinks he's already including the jquery URL via the line `wp_enqueue_script( 'jquery' );` in his `enqueue.php`. – Barett Oct 22 '15 at 00:13

WordPress enqueue noConflict() error $ not a function?

4 Answers4

Linked