3

I am working within a not so nice template which has forced me to load some scripts in with JS as I can not control there order. I am trying to load a library but when I attempt to call it, I get an undefined error.

$.getScript( "js/velocity.min.js").done(function(){
    $('body').velocity({ width: 200})
});

Get error: Uncaught TypeError: $(...).velocity is not a function

How can this be? I just loaded you!

enter image description here

Ok there was a conflict with another script which has to be loaded, to fix this I wrapper the velocity code in a closure and set 'define' to null within it.

(function($){
    var define = null;
    //then velocity code is here
})(jQuery)
wazzaday
  • 7,952
  • 5
  • 32
  • 58
  • 1
    Are you sure that the script has been successfully loaded? – kosmos May 14 '15 at 08:57
  • Hey, yeah I can see it in the network tab – wazzaday May 14 '15 at 08:58
  • It's most probabaly because it won't able to get velocity.min.js – CodeWithCoffee May 14 '15 at 08:59
  • check your js file is fine or not some times corrupted js files also creates problem – Avinash Perla May 14 '15 at 09:00
  • 1
    @CodeWithCoffee no because otherwise success callback would't be fired – A. Wolff May 14 '15 at 09:04
  • 1
    as i saw from their website, they mostly call it as `$.Velocity`, so, maybe check the syntax here: http://julian.com/research/velocity/#utilityFunction – Icepickle May 14 '15 at 09:06
  • @Icepickle That's the documentation for the utility function. It's `$().velocity()` everywhere else. – JJJ May 14 '15 at 09:08
  • @Icepickle jQuery's selectors return a jQuery object, so if `$.velocity()` works then I believe `$('elem').velocity()` should also work. – James Donnelly May 14 '15 at 09:08
  • To check jQuery conflicts, try changing `$('body').velocity({ width: 200})` by `jQuery('body').velocity({ width: 200})`, but I don' think the problem is there. If you can check it we can discard it. – kosmos May 14 '15 at 09:08
  • Tried with jQuery, unfortunately its the same error – wazzaday May 14 '15 at 09:10
  • 1
    I imagined. Let's try to load the script from other site, like `//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js` – kosmos May 14 '15 at 09:11
  • 1
    Can you do `$('body').velocity({..})` later via DevTools? Or it still throws? – Artyom Neustroev May 14 '15 at 09:12
  • Please check this codepen, they seem to use `jquery.velocity.js` rather than velocity.min.js: http://codepen.io/julianshapiro/pen/wmtEH – Icepickle May 14 '15 at 09:13
  • Tried from CDN, loads in but error remains, running the code in dev tools also throws the same error. – wazzaday May 14 '15 at 09:13
  • Just curiosity (and it should be the same), but can you change your function to `$.getScript('js/velocity.min.js', function(){ $('body').velocity({ width: 200}); })`? – kosmos May 14 '15 at 09:18
  • Unfortunately the same. I have attempted to load in another library under the same method and it works - it seems to be exclusive to velocity - may be the versions have a conflict – wazzaday May 14 '15 at 09:22
  • What libraries are you loading? Do you have only a jQuery version? – kosmos May 14 '15 at 09:29
  • Libraries are jquery-1.7.2 and Velocity-1.2.2 – wazzaday May 14 '15 at 09:31
  • Can you try with an updated version of jQuery? Like ~2.1.3 – kosmos May 14 '15 at 09:33
  • When I use this link (https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js), I get this error about MIME Types: *"...because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled"*, followed by this error: *"Uncaught TypeError: $(...).velocity is not a function"*... But when I use this link (http://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js), it does work for me without any errors: **[SEE WORKING EXAMPLE](http://jsfiddle.net/u7cgmLch/)** – myfunkyside May 14 '15 at 09:39
  • There seems to be a conflict between velocity and requirejs which is also being loaded in, removing this fixes the problem, but that is not an option – wazzaday May 14 '15 at 10:22
  • Maybe this will help you: http://julian.com/research/velocity/ (search the page for "requirejs") – myfunkyside May 14 '15 at 20:16

1 Answers1

0

Be sure to be loading Zepto/jQuery before Velocity.js

<script type='text/javascript' src='js/zepto.min.js'></script>
<script type="text/javascript" src="js/velocity.min.js"></script>
Thales Oliveira
  • 1