Menu icon Foundation

My Posts





My Comments

Matthew Andrianakos commented on Martin Leib's post 10 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 10 months

Ditto. Foundation 6.4 is impossible. 

Matthew Andrianakos commented on Kyle De Sousa's post 11 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 11 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 12 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 12 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 12 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 12 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




  • 12
    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 Taylor Shaw 3 months ago



Following

    No Content

Followers

My Posts

My Comments

You commented on Martin Leib's post 10 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 10 months

Ditto. Foundation 6.4 is impossible. 

You commented on Kyle De Sousa's post 11 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 11 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 12 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 12 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 12 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 12 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