Menu icon Foundation
All Javascript not working

I can't seem to get any of the dropdowns and tooltips to work. I believe that the JS is not loading.

- There are no errors in the console
- All scripts are being loaded following the instructions here: http://foundation.zurb.com/docs/javascript.html. The one exception is that I'm loading jQuery in the head section, since I have other plugins that need it there.
- I've double checked and everything matches the dropdown demo
- **The Index.html file I downloaded with the package doesn't run the Javascript either**

I've spent quite a while on this and am stumped.

EDIT:

Ok, I did get the index.html page to run Javascript and the dropdowns to work, but still can't make it work on the site itself.

I'm not able to share a live link, but here is the page's rendered source code, minus the form fields in the middle which I removed: https://dl.dropboxusercontent.com/u/111563995/FoundationJSTroubleshoot.txt

A few notes/hypotheses:
- I'm using the CSS version, with a modified package based on 16 columns--maybe I messed something up during configuration
- We're using jQuery as $j (as you can see in the code)
- It's a Force.com site (Salesforce) using Visual Force/Apex. Maybe there's a conflict.
- There is 1 image that's not loading because the link is broken, but I'd hope that wouldn't prevent Foundation JS from working.

Thanks again.

EDIT 2: Resolved

The issue was resolved in 2 ways:
1. Something was missing or corrupted from the custom package I downloaded the first time. Re-downloading the package was the first step.
2. I'm building the site on Force.com (salesforce/visualforce), and it has very strict standards rules. I wasn't allowed to include just the attribute "data-dropdown-content" with no value. When I included data-dropdown-content="" it got stripped out of the HTML. So, I do this on page load:

   $j('.f-dropdown').each(function(){
        $j(this).attr('data-dropdown-content','');
    });

javascriptgetting started

I can't seem to get any of the dropdowns and tooltips to work. I believe that the JS is not loading.

- There are no errors in the console
- All scripts are being loaded following the instructions here: http://foundation.zurb.com/docs/javascript.html. The one exception is that I'm loading jQuery in the head section, since I have other plugins that need it there.
- I've double checked and everything matches the dropdown demo
- **The Index.html file I downloaded with the package doesn't run the Javascript either**

I've spent quite a while on this and am stumped.

EDIT:

Ok, I did get the index.html page to run Javascript and the dropdowns to work, but still can't make it work on the site itself.

I'm not able to share a live link, but here is the page's rendered source code, minus the form fields in the middle which I removed: https://dl.dropboxusercontent.com/u/111563995/FoundationJSTroubleshoot.txt

A few notes/hypotheses:
- I'm using the CSS version, with a modified package based on 16 columns--maybe I messed something up during configuration
- We're using jQuery as $j (as you can see in the code)
- It's a Force.com site (Salesforce) using Visual Force/Apex. Maybe there's a conflict.
- There is 1 image that's not loading because the link is broken, but I'd hope that wouldn't prevent Foundation JS from working.

Thanks again.

EDIT 2: Resolved

The issue was resolved in 2 ways:
1. Something was missing or corrupted from the custom package I downloaded the first time. Re-downloading the package was the first step.
2. I'm building the site on Force.com (salesforce/visualforce), and it has very strict standards rules. I wasn't allowed to include just the attribute "data-dropdown-content" with no value. When I included data-dropdown-content="" it got stripped out of the HTML. So, I do this on page load:

   $j('.f-dropdown').each(function(){
        $j(this).attr('data-dropdown-content','');
    });

This post has been closed. No new replies can be added.

Wing-Hou Chan over 5 years ago

Hey Alan!

A very strange problem indeed.

Is is possible you post some code or even better a link to the site in development?

Roland over 5 years ago

Can you post a link to your page?

Just to be sure you should also check your network tab to see if you have any 404 errors

Rafi Benkual over 5 years ago

Also, are you using the CSS version or the Sass version?