Linking JQuery into my html

Question

I am trying to include an external jQuery file into my html (first time) but it isn't working, just executing the html without the jquery. (css is working fine)

Here's the html code:

<!doctype html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
  <script type="text/javascript" src="<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" />
  <script type="text/javascript" src="script.js"></script>
  <h1>Hello World!</h1>`
</body>
</html>

Here's the jquery code in script.js:

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

And yes, they are all in the same folder (dropbox folder actually, but I don't think dropbox affects anything)

Where you read this `script` in source? give only your url in source — commit, Sep 11 '13 at 21:45
FYI: It's generally accepted to not self-close your `script` tags - do `` instead of ``. I believe self-closing script tags work everywhere except old IE (IE7 maybe?), but people still generally don't do it. — Joe Enos, Sep 11 '13 at 21:46
If you think about what you have done, you would end up in a Infinite loop because you would put the script in every `src` — iConnor, Sep 11 '13 at 21:52
Best you can do is learn to debug this error by referring to developer tools for whatever browser you are using. Quick google will help you to get started with developer tools. — Mutant, Sep 11 '13 at 22:00

Trevor · Answer 1 · 2013-09-11T21:57:10.800

2

Is this a typo? You have an extra <script in your src=" "

<script type="text/javascript" src="<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" />

should be

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

edited Sep 11 '13 at 21:57

answered Sep 11 '13 at 21:44

Trevor

16,080
9
52
83

1

just an fyil if you surround a piece of code with ` (backticks) it will make it a code snippet. So you can have ` – Fresheyeball Sep 11 '13 at 21:53

Sparky · Accepted Answer · 2013-09-12T13:38:16.010

<script type="text/javascript" src="<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" />
<script type="text/javascript" src="script.js"></script>

First, remove the extra src="<script inside your <script> tag. Also "close" it with a </script> tag...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

Second, place the script includes at the end of your <body> section, just before the </body> tag:

    ....
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>

OR, anywhere inside your <head> section:

    ....
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    ....
</head>

And finally, make sure the URL path is correct for your version:

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

It's always smart to link to a full version. Otherwise, if the code at the URL is updated, your site could suddenly break without warning.

If you make the changes as indicated above and add a <title> element into your head section...

<head>
    <title>Title</title>
    ....

... your code will then pass HTML validation.

http://validator.w3.org/check

Finally, link to a full version number instead: `http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js` — Blazemonger, Sep 11 '13 at 21:50
Self-close a script? Really? That's completely invalid HTML. Self-closing does not exist in HTML. Most if not all HTML parsers will put everything that follows the script inside of the script itself, as effective you haven't closed it. — Fabrício Matté, Sep 11 '13 at 22:11
@FabrícioMatté, my fault for missing his `doctype`... corrected and it now passes [HTML validation](http://validator.w3.org/check) as long as the OP includes a `` element in the ``. — Sparky, Sep 11 '13 at 22:23
No problems, +1 now (I would have corrected it myself but I dislike radically changing one else's answer). — Fabrício Matté, Sep 11 '13 at 22:30

Hanlet Escaño · Answer 3 · 2013-09-11T21:48:32.807

1

Change it to:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

You have the full script inside the src, which is wrong.

edited Sep 11 '13 at 21:48

answered Sep 11 '13 at 21:42

Hanlet Escaño

17,114
8
52
75

The latest jQuery(2.x) is not working on IE8 any more!! Beware! – Silviu Burcea Sep 11 '13 at 21:46
1

[It's always a bad idea to point to the latest jQuery without specifying a full version number. The API may change unexpectedly and your code may fail without explanation.](http://stackoverflow.com/questions/12608242/latest-jquery-version-on-googles-cdn/12608285#12608285) – Blazemonger Sep 11 '13 at 21:46
1

@SilviuBurcea [jQuery 2.x was never supposed to work on IE8. Only jQuery 1.x supports IE6-8.](http://blog.jquery.com/2013/04/18/jquery-2-0-released/) – Blazemonger Sep 11 '13 at 21:47
@Blazemonger I know, I just wanted to warn you. – Silviu Burcea Sep 11 '13 at 21:48

Linking JQuery into my html

3 Answers3