1

I've been having trouble implementing jQuery - in particular, replicating this exercise from Code Academy. I understand from this other question on Stack Overflow that the <script> referencing jQuery.js needs to be placed before the <script> referencing the local JavaScript file in order for the $(document).ready(); to be recognized.

As such, here is index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Behold!</title>
        <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>   
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
        <script type='text/javascript' src='index.js'></script> 
    </head>
    <body>
        <div id="menu">
            <h3>jQuery</h3>
            <div>
                <p>jQuery is a JavaScript library that makes your websites look absolutely stunning.</p>
            </div>
            <h3>jQuery UI</h3>
            <div>
                <p>jQuery UI includes even more jQuery goodness!</p>
            </div>
            <h3>JavaScript</h3>
            <div>
                <p>JavaScript is a programming language used in web browsers.</p>
            </div>
        </div>
    </body>
</html>

And then here is my index.js:

$(document).ready(function() {
    $("#menu").accordion({collapsible: true, active: false});
});

In both Chrome and IE, this displays as a entirely blank page, with no trace of the jQuery accordion or text whatsoever. Please let me know if I'm overlooking something - I really appreciate the help. Thanks!

Community
  • 1
  • 1
user2408069
  • 45
  • 1
  • 6
  • 1
    you are missing an 's' in the `src` link.It should be jquery-ui.min.js – Harsha Venkataramu May 22 '13 at 05:45
  • 1
    More importantly, look into a `web inspector`, in FireFox, you can use Firebug, in Chrome, simply press F12, in IE it's Developer tools. The `console` within the `web inspector` will always throw an error if it finds a resource that won't load. – Ohgodwhy May 22 '13 at 05:47

2 Answers2

0

This:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.j" type="text/javascript"></script>

Should be this:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
Borniet
  • 3,544
  • 4
  • 24
  • 33
0

I don't know if this error is just from copy'n'paste but the file extension is incorrect (should be "js" and not "j").

Furthermore you do not include jQuery itself (only jQuery UI).

Use the following head-Area:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript' src='index.js'></script>

These work for me.

Werzi2001
  • 2,035
  • 1
  • 18
  • 41
  • This I certainly forgot to do - in combination with adding "http:" before each of the links as per Borniet's answer above, this worked! Thank you for your help! – user2408069 May 22 '13 at 06:10
  • Actually it should work without "http:" (as proposed by Google https://developers.google.com/speed/libraries/devguide#jquery). If the protocol is missing the browser uses the protocol from the main page (just as it uses the domain if the domain is missing). This has the advantage that it also works for https without changes. So the only errors were the missing "s" and include of jQuery itself. – Werzi2001 May 22 '13 at 06:20