jQuery not defined - $ not defined

Question

I googled, checked all the usual responses.. The scripts appear to be in the correct order (they work in this same order in the demo ) but for some reason when i try to implement it I get the errors.

I have a paste bin with my complete page code. But here's the gist of it.

in my header:

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>     <script src="picker/picker.js"></script>
<script src="picker/picker.date.js"></script>
<script src="picker/picker.time.js"></script>
<script src="picker/legacy.js"></script>
<script src="picker/main.js"></script>

in my body:

<input id="" class="fieldset__input js__datepicker" type="text" placeholder="Choose Date">
<input id="" class="fieldset__input js__timepicker" type="text" placeholder="Choose Time">

When I strip everything else out except these parts it works fine. Why is this not working?

MY ERRORS

[10:23:00.178] ReferenceError: $ is not defined @ https://www.nn.com/picker/picker.js:26
[10:23:00.209] ReferenceError: Picker is not defined @ https://www.nnnr.com/picker/picker.date.js:23
[10:23:00.223] ReferenceError: Picker is not defined @ https://www.nnnnnn.com/picker/picker.time.js:23
[10:23:00.245] ReferenceError: $ is not defined @ https://www.nnnn.com/picker/main.js:30

Answer 1

If you're running on an https domain, your includes also need to come from an https domain.

<script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>

And, if you're site can be both http and https, you can make it protocol relative so that it automatically switches to whatever is needed.

<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>

note however that using the protocol relative one only works if you're running the code from a webserver (which, to be honest, should always be the case.)

Answer 2

Try to wrap your function like this:

(function($){
$(whatever).click(function(){ alert('this should be working');})
})(jQuery)

or you can try to add

var $ = jQuery 

on top of your js file