CODEWITHSUNDEEP
javascripthead.js
nanonerd
nanonerd

Reputation: 1984

Head.js weird action

I'm trying to use head.js. Getting some weird action. Below works but if I comment out "alert('hi')" in the script in the BODY, then the head.js doesn't seem to work.

So I tried commenting out all the head.js stuff and used a standard tag for each JS library. And it works as expected. But when using Head.js, it fails if the "alert('hi')" is commented out. Obviously, for production, I want to remove this alert but then I get this error message: "ReferenceError: $ is not defined" ... ??? But if I uncomment out the alert, then it all works and pulls data from the DB ???

Any thoughts? 

<head>
<title></title>

 <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js">           
</script>

<script type="text/javascript">
    head.js(
        /* root level */
        "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", 
        "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
        "/assets/scripts/external/_references.js",
        "../../assets/scripts/external/jquery.unobtrusive-ajax.min.js",
        "../../assets/scripts/external/jquery.validate-vsdoc.js",
        "../../assets/scripts/external/jquery.validate.min.js",
        "../../assets/scripts/external/jquery.validate.unobtrusive.min.js",
        "../../assets/scripts/external/knockout-2.3.0.js",
        "../../assets/scripts/external/modernizr-2.6.2.js",

        "/assets/css/Index.css",           
        "assets/css/OrangeCounty.css"                       
    );
</script>
</head>

<body>    
<div id="list"></div>

<script>
    alert('hi');
    $.getJSON("http://localhost/webapi/api/ccc", function (result) {
        $.each(result, function (i, field) {
            $("div").append(field.Code + " " + field.Country1 + "<br/>");
        });
    });
</script>              
</body>

Upvotes: 0

Views: 170

Answers (1)

Blender
Blender

Reputation: 298156

The alert() stalls the script execution enough for jQuery to actually load. Head.js loads the scripts in parallel and doesn't block, so you have to use it with a callback:

head.js(..., function() {
    // Your code
});

Or put that code into a separate script file and put it after jQuery in your head.js call.

Upvotes: 1

Related Questions