0

I use grunt to compile and minify my js.

This includes jquery.

I now need to add someone else's script into my site, so I have done:

<script defer src="/static/js/my-site-script.js"></script>
<script type="text/javascript" src="http://www.test.com/js/someones-script.js"></script>

But this fails to work.

I know it's a problem with jquery because when I add in jquery in a script tag prior to someone else's script, it works.

The other script does include:

$(document).ready(function() {

});

Also jquery does work in my code.

What's going on?

panthro
  • 19,109
  • 50
  • 152
  • 271
  • 2
    Have you checked for errors in you browser console? – Stuart Miller May 08 '14 at 15:22
  • Yes - Uncaught ReferenceError: $ is not defined – panthro May 08 '14 at 15:23
  • 2
    You have to add `jQuery` before other script where `jQuery` has been used. – The Alpha May 08 '14 at 15:24
  • 1
    Well when a part of the script tries to call $ as a jQuery object it hasn't been defined yet. Perhaps the order things are being added is incorrect and jQuery needs to be defined before it is called? Bear in ming that the defer attribute stops your first script from being run until the whole page is loaded so is probably being run after the second one. – Stuart Miller May 08 '14 at 15:25

2 Answers2

2

The other script is being loaded before jQuery has been loaded, hence your error. Try removing the defer or using a dependency library like require.js.

Evan Knowles
  • 7,097
  • 2
  • 32
  • 67
0

difficult to say without seeing the script to look at side effects - but is the 3rd party code defining its own window.$ therefore over-writing jQuery.

Check running your jQuery in noConflict mode or setting it to a new value, to safely use it.

If as you say the error is $ is undefined, it's one of the scripts attempting to access $ before its defined. So either use jQuery's getScript method, or find a way of running after document load, when jquery will be defined.

Sam Carrington
  • 35
  • 5