Menu icon Foundation
How to call call jQuery in 6.4

Hi there, im trying to add some javascript jQuery code that i created but keep on getting jQuery is undefined, im using the npm and foundations advanced template, use to be easy in 6.3

6.4jqueryjavascript

Hi there, im trying to add some javascript jQuery code that i created but keep on getting jQuery is undefined, im using the npm and foundations advanced template, use to be easy in 6.3

Rafi Benkual over 1 year ago

Can you share what you are adding and how you doing it so we can help you more?

Kyle De Sousa over 1 year ago

RUN : foundation new

 

-- > A website (Foundation for Sites)

-- > ZURB Template: includes Handlebars templates and Sass/JS compilers 

 

After the intial setup is all there.

 

Then I create a new custom-scripts.js file is /src/assets/js/lib/custom-scripts.js

 

Then i add this to my app.js file  import './lib/custom-scripts';

 

The scripts in the custom-scripts.js file contain some custom jQuery that I created.

 

 

$(document).on('ready', function () {

 

    $(".cs-select").each(function() {

        var classes = $(this).attr("class"),

            id      = $(this).attr("id"),

            name    = $(this).attr("name");

        var template =  '<div class="' + classes + '">';

        template += '<span class="cs-select-trigger">' + $(this).attr("placeholder") + '</span>';

        template += '<div class="cs-options">';

        $(this).find("option").each(function() {

            template += '<span class="cs-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';

        });

        template += '</div></div>';

 

        $(this).wrap('<div class="cs-select-wrapper"></div>');

        $(this).hide();

        $(this).after(template);

    });

    $(".cs-option:first-of-type").hover(function() {

        $(this).parents(".cs-options").addClass("option-hover");

    }, function() {

        $(this).parents(".cs-options").removeClass("option-hover");

    });

    $(".cs-select-trigger").on("click", function() {

        $('html').one('click',function() {

            $(".cs-select").removeClass("opened");

        });

        $(this).parents(".cs-select").toggleClass("opened");

        event.stopPropagation();

    });

    $(".cs-option").on("click", function() {

        $(this).parents(".cs-select-wrapper").find("select").val($(this).data("value"));

        $(this).parents(".cs-options").find(".cs-option").removeClass("selection");

        $(this).addClass("selection");

        $(this).parents(".cs-select").removeClass("opened");

        $(this).parents(".cs-select").find(".cs-select-trigger").text($(this).text());

    });

});

 

 

That I want to import into my main  JS file

 

but i keep on getting $ not defined

 

Ryan Patterson over 1 year ago

Use jQuery instead of $. So your code would look like this

jQuery(document).on('ready', function () {

 

    jQuery(".cs-select").each(function() {

        var classes = jQuery(this).attr("class"),

            id      = jQuery(this).attr("id"),

            name    = jQuery(this).attr("name");

        var template =  '<div class="' + classes + '">';

        template += '<span class="cs-select-trigger">' + jQuery(this).attr("placeholder") + '</span>';

        template += '<div class="cs-options">';

        jQuery(this).find("option").each(function() {

            template += '<span class="cs-option ' + jQuery(this).attr("class") + '" data-value="' + jQuery(this).attr("value") + '">' + jQuery(this).html() + '</span>';

        });

        template += '</div></div>';

 

        jQuery(this).wrap('<div class="cs-select-wrapper"></div>');

        jQuery(this).hide();

        jQuery(this).after(template);

    });

    jQuery(".cs-option:first-of-type").hover(function() {

        jQuery(this).parents(".cs-options").addClass("option-hover");

    }, function() {

        jQuery(this).parents(".cs-options").removeClass("option-hover");

    });

    jQuery(".cs-select-trigger").on("click", function() {

        jQuery('html').one('click',function() {

            jQuery(".cs-select").removeClass("opened");

        });

        jQuery(this).parents(".cs-select").toggleClass("opened");

        event.stopPropagation();

    });

    jQuery(".cs-option").on("click", function() {

        jQuery(this).parents(".cs-select-wrapper").find("select").val(jQuery(this).data("value"));

        jQuery(this).parents(".cs-options").find(".cs-option").removeClass("selection");

        jQuery(this).addClass("selection");

        jQuery(this).parents(".cs-select").removeClass("opened");

        jQuery(this).parents(".cs-select").find(".cs-select-trigger").text(jQuery(this).text());

    });

});

 

OR you can define the usage of $ in the document ready function. So would look like this:

jQuery(document).on('ready', function ( $ ) {

 

    $(".cs-select").each(function() {

        var classes = $(this).attr("class"),

            id      = $(this).attr("id"),

            name    = $(this).attr("name");

        var template =  '<div class="' + classes + '">';

        template += '<span class="cs-select-trigger">' + $(this).attr("placeholder") + '</span>';

        template += '<div class="cs-options">';

        $(this).find("option").each(function() {

            template += '<span class="cs-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';

        });

        template += '</div></div>';

 

        $(this).wrap('<div class="cs-select-wrapper"></div>');

        $(this).hide();

        $(this).after(template);

    });

    $(".cs-option:first-of-type").hover(function() {

        $(this).parents(".cs-options").addClass("option-hover");

    }, function() {

        $(this).parents(".cs-options").removeClass("option-hover");

    });

    $(".cs-select-trigger").on("click", function() {

        $('html').one('click',function() {

            $(".cs-select").removeClass("opened");

        });

        $(this).parents(".cs-select").toggleClass("opened");

        event.stopPropagation();

    });

    $(".cs-option").on("click", function() {

        $(this).parents(".cs-select-wrapper").find("select").val($(this).data("value"));

        $(this).parents(".cs-options").find(".cs-option").removeClass("selection");

        $(this).addClass("selection");

        $(this).parents(".cs-select").removeClass("opened");

        $(this).parents(".cs-select").find(".cs-select-trigger").text($(this).text());

    });

});

All I did was place $ inside the function() on document ready. That should let you use $ now. 

Matthew Andrianakos over 1 year ago

@Ryan Patterson

Thanks for your answer, that's helpful. But I don't understand why this change is required. 

Is it because of the way Foundation works? Or is it because the latest build requires Jquery3?

Can you explain a little more.

Thanks.

 

Kyle De Sousa over 1 year ago

@Ryan Patterson, I tried implementing your method and adding the "$" variable for jQuery, after I do that i get "jQuery" is not difined, the only work around i got was to place jquery as a CDN link in the header, to call it off an external server.

Defiantly not a way the way would move forward into production, just wish there was more in explaining on how to use GULP or web pack setup of foundations

Matthew Andrianakos over 1 year ago

@Kyle De Sousa

I
'm having the same problem.

I tried the external CDN approach and it looked like it worked until it started throwing errors when I used it for more complicated stuff.

I think Jquery is being loaded twice using this method. 

I think this is a version issue. The latest Foundation uses Jquery 3. I don't know how to downgrade, but I suspect this would fix the issue.

Ryan Patterson over 1 year ago

@Kyle De Sousa, my answer was simply based off my past experience with getting the error message $ is not defined. Since you get jQuery is not defined when switching to the "safe" method, then sounds like your trying to use jQuery before it is being loaded. But since you're using Foundation Templates, I can't really offer any other suggestions without seeing your site and being able to inspect. I haven't used Foundation templates nor npm ( I use CodeKit to do all this type of stuff for me) before so not really sure what type of issues pop up with those. 

Sorry I couldn't be more help. Hopefully someone more knowledgeable will shed some light on your issue. Good luck!

rklump over 1 year ago

The order in which webpack compiles jQuery to app.js ? 

So why does web-pack always put jQuery after whats ever in  "/src/js/app.js "

when it complies to "/dist/assets/js/app.js"?

it makes me have to load jQuery twice....

any thoughts, ...

 

 

rklump over 1 year ago

//import whatInput from 'what-input';

//window.$ = $;

//import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';

// LOOK WHERE THE FOLLOWING ENDS UP IN /dist/assets/js/app.js
console.log("jQuery not defined");
import $ from 'jquery';

Edward Nickerson over 1 year ago

Ok, so I had the same jQuery is not defined error message when trying to import the OWL Carousel jQuery plugin as per the instructions here:

http://zurb.com/university/lessons/adding-on-to-a-great-foundation

In fact I thought it may have to do with OWL, so I tried to replace it with Slick Carousel - and ran into the exact same problem.

After chasing my tail for three days, crying into my keyboard and being generally miserable to be around, I woke up one morning and though hey - why don't I just define jQuery myself!

So in my app.js file I put this and presto - it works. No idea why though.

import $ from 'jquery';

//Adding in this solves the jQuery not defined error:
import jQuery from 'jquery';
import whatInput from 'what-input';

window.$ = $;

//Adding in this is also required
window.jQuery = jQuery;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';


$(document).foundation();

I have a custom.js file, added into my config.yml - which runs my other code:

jQuery(document).ready(function ($) {
    
    $('#owl-example').owlCarousel({
        items:3
    });

});

An now this works. Maybe it will help solve your problem?

over 1 year ago

Same issue here. $ not defined error. Has anyone figured out how to enable $ jquery? This is the console error when trying to import custom js files into the app.js file. 

This is the default configuration in the app.js file out of the box.

When I add the same custom JS directly inside the app.js file, the issue goes away. However, this project has a ton of JS so more organization is needed. 

 

OR **** 

Can someone provide direction on how to rollback the zurb template to 6.3? I am not a npm/gulp expert.

 

Thanks, 

Martin McG over 1 year ago

Same issue. Cant load / use jquery with foundation 6.4 webpack.

 

melissa about 1 year ago

 @Edward Nickerson:

Thanks a lot, adding the suggested lines into app.js solved the jquery-problem for me. Now being able to use the already included foundation-jquery together with custom code! No need to include jquery twice!

 

 

charlyRoot about 1 year ago

 @Edward Nickerson:

That fixed me too! I tried the import but not with the window dec. Brilliant!

import $ from 'jquery';

import jQuery from 'jquery'; // STEP ONE**********

import whatInput from 'what-input';

window.$ = $;

window.jQuery = jQuery;     // STEP TWO**********

import Foundation from 'foundation-sites';

$(document).foundation();

Harsh Gupta 29 days ago

Why It's So hard to add Custome Jquery Function into Foundation 6.5 ?

Can is there a Somple method ?

 

I have multiple pages and i need to add custome jquery function into only one page, and between of the page.

Can you please help me and guide me how to do that ?

Harsh Gupta 29 days ago

Why it always be so hard to add Custome Jquery into Foundation 6.5 ?

 

I am still having an issue.  $ now defined.