3

I'm using foundation to build a basic site, but I'm stuck in a problem that's kind of weird... I don't seem to be able to load jQuery not in chrome nor in firefox (I tried no others).

What hints me that jQuery doesn't load is the error message :

Error: ReferenceError: $ is not defined

I'm calling the function foundation at the end of the template : 

  <script>
    $(document).foundation();
  </script>

but before that, right after the footer (before other .js) :

  <script>
      document.write('<script src="/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js"><\/script>');
  </script>

this is to call the jQuery or Zepto. But by fear this function might not be working (I'm no javascript expert...) I pluged :

  <script src="http://code.jquery.com/jquery-latest.js"></script>

to the code and other variations... but nothing seems to work.

Furthermore, I also use Bootstrap in other project and I noticed that small details like tooltips and other stuff generally work, but not with the correct design. I'm not sure it's unrelated from jQuery...

I know it's kind of a weird assumption, but is it possible that my computer is not working properly with jQuery? I'm led to believe this because pieces of code I write in my computer don't work well here (like the bootstrap tooltips) but work well in my friend's computer.

The complete code that isn't working :

  <!-- End Header and Nav -->

  <script src="http://code.jquery.com/jquery-latest.js"></script>

<!--
  <script>
      document.write('<script src="/Foundation_custom/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js"><\/script>');
  </script>
-->

<!--  <script src="/Foundation_custom/js/foundation.min.js"></script>-->



  <script src="/Foundation_custom/js/foundation/foundation.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.alerts.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.clearing.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.cookie.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.dropdown.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.forms.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.joyride.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.magellan.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.orbit.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.placeholder.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.reveal.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.section.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.tooltips.js"></script>

  <script src="/Foundation_custom/js/foundation/foundation.topbar.js"></script>



  <script>
    $(document).foundation();
  </script>

</body>
</html>
Improve this question
7
  • 2
    Check the network tab and see if the jQuery library is being loaded at all. Also make sure the jQuery script is before all other scripts. Commented Apr 5, 2013 at 16:35
  • network tab in chrome only says in the end with warning sign : No requests captured. Reload the page to see detailed information on the network activity. Commented Apr 5, 2013 at 16:39
  • ... keep the console open and reload the page. Commented Apr 5, 2013 at 16:41
  • Could you also give us some details on your local setup? Are you using Apache in a MAMP/WAMP/LAMP?. I've set up a Codepen and jQuery is loading properly. Commented Apr 5, 2013 at 16:43
  • sorry, I just rechecked and actually I get a status 304 (Not modified) on jQuery. All other .js plugins failed to load. I get error in chrome : Uncaught TypeError Object [object Object] has no method 'foundation' Commented Apr 5, 2013 at 16:46

5 Answers 5

Reset to default
2

Check whether the jQuery library is actually loading. Depending on your browser settings, if you're loading it from your computer, locally, sometimes browsers block scripts from remote sources.

You can have a look at the console to check that.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I think its loading alright judging from the network tab in chrome developer tools. Gives 304 status (Not modified).
Have you tried loading it from a different source? E.g. http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
Are you still getting the same error: Error: ReferenceError: $ is not defined
It's good already. Sorry, it was a problem with paths... I had to write all from C:/... to get the .js files to work and recognize the variable. initially jQuery was not working also because it was not recognizing its path. Thanks for the tips!
1

You have to wait for the document ready event. Try this:

<script>
$(function() {
   $(document).foundation();
});
</script>
Improve this answer

Comments

0

Make sure there is no jQuery.noConflict (); on the last line of the jquery.js

Improve this answer

1 Comment

thewirelessguy.co.uk/2013/03/…
0

Usually, the jQuery library or the Zepto library are inserted as low in the page as possible, just before the closing tag.

Be sure to insert your script AFTER the line in which jQuery/Zepto is included:

<script>
  document.write('<script src=/js/vendor/' +
  ('__proto__' in {} ? 'zepto' : 'jquery') +
  '.js><\/script>')
</script>
Improve this answer

Comments

0

You can reinitialize it:
$(document).foundation('tooltip');

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.