Search code examples
javascriptjqueryhtmlonload

$ not available in onload

I cant understand the error where $ is unidentified when using onload on my page. This is just as sample page I created where I need to call a function after loading the page.

Jquery Code

$(document).ready(function(){
 alert("loaded");
});

<html>

<head>
</head>

<body>

</body>
    <script src="../Jquery/contact.js"></script>
    <script src="../Jquery/jquery-1.12.0.min.js"></script>
    <script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
    <script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>



</html>
Solution

  • Two issues here:

    1. It's invalid to put script or link tags as direct children of html, so it doesn't surprise me that it doesn't work correctly on at least some browsers. You need to put them in the body or head. The only valid content of the html element is a single head element followed by a single body element.

      Standard guidance, for instance in the YUI Best Practices for Speeding Up your Website is:

      • Put the link tags in head
      • Put the script tags at the bottom of body, just prior to the closing </body> tag

    2. It looks like your contact.js file calls $() immediately (not in response to an event). If so, then contact.js must be after jQuery in the list of scripts, so that jQuery has been loaded when your code runs.

    So:

    <html>

<head>
    <link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</head>

<body>

    <script src="../Jquery/jquery-1.12.0.min.js"></script>
    <script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
    <script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
    <script src="../Jquery/contact.js"></script>

</body>
</html>

    Side notes:

    • You might look at script and CSS combining and minifying, to avoid having a lot of HTTP requests.
    • Consider adding <!doctype html> at the very top to ensure the browser is in standards mode (not quirks mode).
    • Consider adding <meta charset="UTF-8"> at the top of head (ensuring that the file is indeed in UTF-8, or changing the "UTF-8" in that to whatever encoding you're actually using in the file).