Menu icon Foundation

My Posts





My Comments

Matthew Andrianakos commented on Martin Leib's post 2 months

Yeah, I'm trying to DOWNGRADE using this method and it's throwing up errors as well.Can you clarify Rafi?

Matthew Andrianakos commented on Ivan Ortiz's post 2 months

Ditto. Foundation 6.4 is impossible. 

Matthew Andrianakos commented on Kyle De Sousa's post 3 months

@Kyle De SousaI'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.

Matthew Andrianakos commented on Kyle De Sousa's post 3 months

@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.
 

Matthew Andrianakos commented on Matthew Andrianakos's post 4 months

UPDATE:
Everything seems to work as it should if I add Jquery by link reference:
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>

<script src="{{root}}assets/js/app.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/v/zf/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/datatables.min.js"&gt;&lt;/script>
 
I suspect I shouldn't need to do this. Doesn't Jquery get packaged into app.js? Is something breaking the Jquery code in the compiled app.js?
 
FURTHER UPDATE - This doesn't work. It looks like Jquery is loaded twice. Everything breaks.

Matthew Andrianakos commented on Matthew Andrianakos's post 4 months

Hi Rafi,
Thanks for the link, but I can't make heads or tails of it. 
My first experience with cli/gulp/node/bower/babel etc was when I installed Foundation 6.3 a couple of weeks ago. I'm kicking myself for developing the old way for as long as I did. I got my head around how that worked. But this new stack is a steeper learning curve for my technical level.I've tried several methods for including my additional file - main.js. The closest I got to working was this:
import $ from 'jquery';
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';

$(document).foundation();
import './main';
 
app.js compiles and includes the contents of main.js
//main.js

$(document).ready(function(){
alert("Hello,world");
});
However, I get this error in the browser:
 
app.js:22248 Uncaught ReferenceError: $ is not defined
at Object.<anonymous> (app.js:22248)
at webpack_require (app.js:20)
at Object.defineProperty.value (app.js:14485)
at webpack_require (app.js:20)
at Object.<anonymous> (app.js:22256)
at webpack_require (app.js:20)
at _typeof (app.js:66)
at app.js:69
 
Additionally, if I leave the fresh build untouched (No main.js) and reference the following script as below:
<script src="{{root}}assets/js/app.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/v/zf/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/datatables.min.js"&gt;&lt;/script>
 
I get the following error:
Uncaught ReferenceError: jQuery is not defined
at datatables.min.js:17
at datatables.min.js:17
 
 
Any ideas?
 

Matthew Andrianakos commented on Matthew Andrianakos's post 4 months

Hi Rafi,
The main issue is Javascript. I can't figure out how to add any additional files. Plus I keep getting Jquery errors on fresh builds with minor changes. I've opened a separate issue here. Perhaps it's best if you could help there.http://foundation.zurb.com/forum/posts/53439-how-do-i-add-more-javascript-files-to-my-foundation-64-zurb-stack
 

Matthew Andrianakos commented on Matthew Andrianakos's post 4 months

Ahh, so all those beautiful emails I was creating in Campaign Monitor weren't so beautiful after all!Thanks, that's good to know. 

Posts Followed




  • 8
    Replies
  • Foundation 6.4.1 - Add JS files

    By Martin

    js6.4.1

    Hi all,&nbsp; Ive installed a clean version of 6.4.1 through the CLI. On previous versions I would add a js file into the js folder and it would be compiled into app.js file, just as the foundation docs outline. &nbsp; I'm unfamiliar with webpack, but ... (continued)

    Last Reply by Steve Winnington 10 days ago



Following

    No Content

Followers

My Posts

My Comments

You commented on Martin Leib's post 2 months

Yeah, I'm trying to DOWNGRADE using this method and it's throwing up errors as well.Can you clarify Rafi?

You commented on Ivan Ortiz's post 2 months

Ditto. Foundation 6.4 is impossible. 

You commented on Kyle De Sousa's post 3 months

@Kyle De SousaI'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.

You commented on Kyle De Sousa's post 3 months

@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.
 

You commented on Matthew Andrianakos's post 4 months

UPDATE:
Everything seems to work as it should if I add Jquery by link reference:
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>

<script src="{{root}}assets/js/app.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/v/zf/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/datatables.min.js"&gt;&lt;/script>
 
I suspect I shouldn't need to do this. Doesn't Jquery get packaged into app.js? Is something breaking the Jquery code in the compiled app.js?
 
FURTHER UPDATE - This doesn't work. It looks like Jquery is loaded twice. Everything breaks.

You commented on Matthew Andrianakos's post 4 months

Hi Rafi,
Thanks for the link, but I can't make heads or tails of it. 
My first experience with cli/gulp/node/bower/babel etc was when I installed Foundation 6.3 a couple of weeks ago. I'm kicking myself for developing the old way for as long as I did. I got my head around how that worked. But this new stack is a steeper learning curve for my technical level.I've tried several methods for including my additional file - main.js. The closest I got to working was this:
import $ from 'jquery';
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';

$(document).foundation();
import './main';
 
app.js compiles and includes the contents of main.js
//main.js

$(document).ready(function(){
alert("Hello,world");
});
However, I get this error in the browser:
 
app.js:22248 Uncaught ReferenceError: $ is not defined
at Object.<anonymous> (app.js:22248)
at webpack_require (app.js:20)
at Object.defineProperty.value (app.js:14485)
at webpack_require (app.js:20)
at Object.<anonymous> (app.js:22256)
at webpack_require (app.js:20)
at _typeof (app.js:66)
at app.js:69
 
Additionally, if I leave the fresh build untouched (No main.js) and reference the following script as below:
<script src="{{root}}assets/js/app.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/v/zf/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/datatables.min.js"&gt;&lt;/script>
 
I get the following error:
Uncaught ReferenceError: jQuery is not defined
at datatables.min.js:17
at datatables.min.js:17
 
 
Any ideas?
 

You commented on Matthew Andrianakos's post 4 months

Hi Rafi,
The main issue is Javascript. I can't figure out how to add any additional files. Plus I keep getting Jquery errors on fresh builds with minor changes. I've opened a separate issue here. Perhaps it's best if you could help there.http://foundation.zurb.com/forum/posts/53439-how-do-i-add-more-javascript-files-to-my-foundation-64-zurb-stack
 

You commented on Matthew Andrianakos's post 4 months

Ahh, so all those beautiful emails I was creating in Campaign Monitor weren't so beautiful after all!Thanks, that's good to know. 

Posts Followed

Following

  • No Content

Followers

  • No Content