Menu icon Foundation
Cannot get ANY js plugins to work in 6.4.2, help!!

Please help.... I'm struggling to get any external JS to work in 6.4.2 and it is absolutely driving me crazy, I have a project to complete!!

I am trying to install foundation date-picker. I have followed various instructions from threads on this forum such as this on how to load modules with webpack but nothing is working. I have even tried a CDN for the datepicker and even another jQuery datepicker. 

When loading the foundation date-picker via CDN, I get this error:

Uncaught TypeError: Cannot read property 'fn' of undefined

The nearest I've got is including the jQuery CDN in the default template and it throws no errors, however the datepicker doesn't work. When trying this datepicker via CDN, it tells me jQuery is not defined. 

I know it's something to do with the order of things loading, but can't figure it out. This plugin worked perfectly in 6.3 and I'm really struggling with this new version of Foundation, it's surely supposed to make things easier, instead I've wasted so much time figuring it out.

Docs are not helping much, the links to threads of module exporting and webpack didn't make sense. Seems like I'm not the only one having these issues.

Any help would be greatly appreciated. Thanks for the good work

Ash 

jspluginsfoundation-sites6.4.2webpackcdn

Please help.... I'm struggling to get any external JS to work in 6.4.2 and it is absolutely driving me crazy, I have a project to complete!!

I am trying to install foundation date-picker. I have followed various instructions from threads on this forum such as this on how to load modules with webpack but nothing is working. I have even tried a CDN for the datepicker and even another jQuery datepicker. 

When loading the foundation date-picker via CDN, I get this error:

Uncaught TypeError: Cannot read property 'fn' of undefined

The nearest I've got is including the jQuery CDN in the default template and it throws no errors, however the datepicker doesn't work. When trying this datepicker via CDN, it tells me jQuery is not defined. 

I know it's something to do with the order of things loading, but can't figure it out. This plugin worked perfectly in 6.3 and I'm really struggling with this new version of Foundation, it's surely supposed to make things easier, instead I've wasted so much time figuring it out.

Docs are not helping much, the links to threads of module exporting and webpack didn't make sense. Seems like I'm not the only one having these issues.

Any help would be greatly appreciated. Thanks for the good work

Ash 

Rafi Benkual over 1 year ago

This is not likely an ES6 plugin. So you'll likely need to change the way you initialize it. How are you initializing the plugin?

Ash Williams over 1 year ago

As per the docs for foundation datepicker 

  $('.fdatepicker').fdatepicker({
    format: 'dd-mm-yyyy',
    startView: 4,
    startDate: '01-01-1940',
    leftArrow: '<i class="fa fa-caret-left" aria-hidden="true"></i>',
    rightArrow: '<i class="fa fa-caret-right" aria-hidden="true"></i>'
  });
});

I've used this exact same code in 6.3 and it was working fine.

Thanks Rafi

Ash Williams over 1 year ago

To be more specific, I've wrapped in an open reveal function:

//INITIALIZE FOUNDATION DATEPICKER
$('.reveal').on('open.zf.reveal', function () {
  $('.fdatepicker').fdatepicker({
    format: 'dd-mm-yyyy',
    startView: 4,
    startDate: '01-01-1940',
    leftArrow: '<i class="fa fa-caret-left" aria-hidden="true"></i>',
    rightArrow: '<i class="fa fa-caret-right" aria-hidden="true"></i>'
  });
});

Ash Williams over 1 year ago

Any ideas Rafi? Thanks

Kevin Neal over 1 year ago

Yep same here, just don't get how JS is meant to work with 6.4.2 

Rafi Benkual over 1 year ago

There may be a more specific way to initialize for webpack - In less than 1 hour - Get answers to your questions on webpack and the ZURB Stack with @kball - https://www.crowdcast.io/e/foundation-open-chat-2

Ash Williams over 1 year ago

Unfortunately, that didn't answer my question. Even when it loads correctly, it is saying that the fdatepicker is not a function. Really frustrated here guys, I want to get this project out the door and I can't because of this one supposedly simple js plugin. 

I'm going to have look at other options after this project. :(

There is an issue with the jQuery in the project somewhere but I can't figure it out. Very close to giving up

 

 

Ash Williams over 1 year ago

Right, for anyone else that has an issue with this, figured it out after a few lost dev days....

I put foundation-datepicker.min.js into js/lib, then because it's an ES5 Module, use the require method to initialize the module:

require('./lib/foundation-datepicker.min.js');

The default app.js has on line 4:

window.$ = $;

This was the cause of frustration and meant that jQuery was not being loaded correctly. Once changed to:

window.jQuery = $;

require the Foundation Datepicker module after this line and everything worked fine....at last! 

Probably not the best way of doing it but it works and I can finish the project. Hope it helps someone

Jessica Barnes over 1 year ago

I tried in Chrome and IE, same problem :(

Rafi Benkual 6 months ago

@ash's answer is the correct way.  Just to update this conversation, there is a great video on how this works here: https://foundation.zurb.com/learn/foundation-6-add-js-libraries.html

 

If you are loading an Es5 js plugin with webpack, this video will be your path.