Script seems to be running before jQuery loads - Uncaught ReferenceError: $ is not defined

Question

I'm editing a sharepoint master page which contains at the very top of my head tag, a call to labJS and a scriptloader.js file.

This is what this file contains:

$LAB
    .script("/Style Library/libs/jquery-1.10.2.min.js")
    .script("/Style Library/libs/jquery-ui.min.js")
    .script("https://www.google.com/jsapi")
    .script("/Style Library/libs/jquery.SPServices-2013.01.min.js")
    .script("/Style Library/libs/angular.min.js")
    .script("/Style Library/libs/knockout-3.0.0.js")
    .script("/Style Library/addons/wpToggle/wpToggle-jQuery.js")
    .script("/Style Library/addons/spCharts/spjs-charts-v4.js")
    .script("/Style Library/addons/quickLaunchToggle/jQuery.LISP.quicklaunch.js")

On my sharepoint site I have a smaller html page which contains a clock

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Digital Clock with jQuery</title>
<style type="text/css"></style>
<script type="text/javascript">
$(document).ready(function() {
// Create two variable with the names of the months and days in an array
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year    
$('#Date').html(dayNames[newDate.getDay()] + ", " +monthNames[newDate.getMonth()]+ ' ' +  newDate.getDate()  + ', ' + newDate.getFullYear());

setInterval( function() {
    // Create a newDate() object and extract the seconds of the current time on the visitor's
    var seconds = new Date().getSeconds();
    // Add a leading zero to seconds value
    $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
    },1000);

setInterval( function() {
    // Create a newDate() object and extract the minutes of the current time on the visitor's
    var minutes = new Date().getMinutes();
    // Add a leading zero to the minutes value
    $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);

setInterval( function() {
    // Create a newDate() object and extract the hours of the current time on the visitor's
    var hours = new Date().getHours();
    // Add a leading zero to the hours value
    $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);

}); 
</script>
</head>
<body>
<div class="clockContainer">
<div class="clock">
    <div id="Date"></div>
        <ul>
            <li id="hours"> </li>
            <li id="point">:</li>
            <li id="min"> </li>
            <li id="point">:</li>
            <li id="sec"> </li>
        </ul>
    </div>
</div>
</body>
</html>

My console gives me this error at line: 1472 of my page but the scriptloader.js file is called basically right after the opening tag.

Try moving your inline script to an external .js file, and include it in the LAB file after the jquery call. — Esaevian, Dec 09 '13 at 22:01
I'm not really sure. In SharePoint you have webparts. I just have a clockHTML file and set the webpart to display that html file. When I inspect the elements of the entire page, the script from the clock html is about 1 thousand lines lower than the jquery call which is at about line 200. I guess the position doesn't matter is labs is dynamically loading the scripts eh. But I thought a document ready call would prevent something like this from happening. — Batman, Dec 09 '13 at 22:06
@esaevian, I'll give that a shot. It's kind of annoying that I need to break up that html file for a small clock though. It would have been nice to simply have one file which contains a clock. Anyways, I'll give that a shot, thanks. — Batman, Dec 09 '13 at 22:07
@Batman You can also check the developer tools to make sure the script files are actually being loaded. I don't know the setup of Sharepoint, so I'm not entirely sure how those script files get to your document. If your document is in a frame, you have to include jquery manually. — Esaevian, Dec 09 '13 at 22:13
The scripts are being loaded but I think it's a timing issue. I tried your suggestion of separating the clock script and loading it through LAB. Seems to work fine. I'm still having issues with getting Google charts to work but that one isn't using a document.ready so maybe that's why. — Batman, Dec 09 '13 at 22:16

score 1 · Accepted Answer · answered Dec 10 '13 at 07:07

1

Try to use _spBodyOnLoadFunctionNames array instead of document.ready.

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("myCustomFunctionName");
function myCustomFunctionName() {
...
} 
</script>

answered Dec 10 '13 at 07:07

Yevgeniy.Chernobrivets

3,194
2
12
14

score 1 · Answer 2 · answered Dec 10 '13 at 07:37

1

When I have problems with JQuery on SP, I use this snippet:

var j = jQuery.noConflict();
ExecuteOrDelayUntilScriptLoaded(run, "sp.js");

function run(){
   j('#selector').method();
}

answered Dec 10 '13 at 07:37

langus

11
1

so here j replaces the dollar sign? – Batman Dec 10 '13 at 23:16

Script seems to be running before jQuery loads - Uncaught ReferenceError: $ is not defined

2 Answers2