Javascript Integration

Hi there. I’m new to Foundation.

Question -
What are the best practices for including custom javascript with Foundation 6 and any particular pitfalls? I have been unable to find any content via searches. If there is content out there that addresses this topic, any links would be greatly appreciated.

The site -
I would like to use custom javascript to handle interactions on a gallery site. The main feature the javascript will handle is filtering images by subject and displaying contents that relate to images.

The site will have a main gallery page and modal for viewing images and further filtering.

Many thanks for your help / advice.

You have to create 3 js files and selfhost jQuery and Foundation. The following order should be used: jQuery, Foundation, your custom JS logic.

All these js files should be directly before </body>.

1 Like

Daniel - thanks again for your response. I have a follow up question.

Behaviour
app.js has a click event which fires on an element. That element, when clicked, also opens a modal (triggered by foundation). In the debugger it appears that the app.js script is running then when that script injects html into the DOM, foundation.js and jquery.js start running and interrupt the app.js script. Accordingly, what is rendered in the modal is incomplete.

Questions
Is this a synchronous / asynchronous problem that needs to be managed in app.js?
Is it bad practice to have the app.js event firing in concurrence with opening the modal using foundations tools?
Is it not desireable to be dynamically creating modal content in the way described above?

Please let me know if I have described the problem clearly enough or am not sufficiently specific with my questions.

Thanks again for your assistance.

I’m not sure I completely understand. You should wrap all code on app.js in the jQuery.ready wrapper to wait for all other scripts.

https://api.jquery.com/ready/

$(function() {
  // Handler for .ready() called.
});

If you dynamically create some component you have to call the needed JS functions by Foundation to initialize the new component (eg with $(element).foundation();.

Thanks Daniel.

My app.js only has vanilla JS which does not call any JS functions by Foundation. It seems to work ok except for the condition with the modal I mentioned above.

I am effectively implementing JS in isolation of the Foundation Framework and structured the JS accordingly which, by the sound of things, will lead to problems like the one I’m experiencing. My understanding was that you could use Foundation JS (similar to what is described at https://get.foundation/sites/docs/javascript.html) or your own JS.

Hope this response makes sense and I can see how my initial description problem would have been confusing.

My thanks again.

Sorry, I don’t completely understand.

Foundation Sites requires jQuery and so you always need jQuery selectors ($(element)) and vanilla JS works yes, but all methods from Foundation and itself use jQuery in the background.

If you are dynamically creating components and initialize them with $(document).foundation(), see https://get.foundation/sites/docs/javascript.html#adding-plugins-after-page-load and everything below that section.

Thanks Daniel. I would probably need to post some code to be more explicit about the problem but it may not be helpful. Appreciate your time and comments. I will look at the look and review the documentation some more.