linking jquery in html

Question

I can't manage to successfully link jQuery to my html. I have made the most simple jQuery code possible just so I know it's right, and I've tried everything I can think of - searching hasn't been helpful..

my html(file name: "test.html":

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="css/text" href="test.css"/>
        <script type="text/javascript" src="test.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    </head>
    <body>
        <div id="orange"></div>
    </body>
</html>

my CSS(file name: "test.css"):

#orange {
    height: 100px;
    width: 100px;
    background-color: orange;
    border-radius: 5px;
    border: 3px solid black;
    margin-left: 100px;
    margin-top: 100px;
    display: none;
}

my JS(file name: "test.js"):

$(document).ready(function() {
    $('div').fadeIn('slow');
});

The console is showing that the jQuery link is loading in 6.52s.

I have also tried to link from the jQuery file I downloaded at

<script src="C:\jQuery\jquery.js"></script>

which also failed miserably...

I did however manage to link jQuery UI somehow and run ".accordion()"... =/

if the accordion is working, then so is jquery. – kennypu Dec 31 '12 at 23:48 — kennypu, Dec 31 '12 at 23:48

score 49 · Accepted Answer · answered Dec 31 '12 at 23:49

49

In this case, your test.js will not run, because you're loading it before jQuery. put it after jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="test.js"></script>

answered Dec 31 '12 at 23:49

kennypu

5,950
2
22
28

6

HAHHAA WOW Thank you! xD This has had me stumped for days... I will set this as my answer once it allows me(have to wait 9mins). Thanks very much for quick response, I was expecting to be waiting longer than that! I am still unsure why my downloaded jquery.js file will not load at all though... – Miles Bardan Dec 31 '12 at 23:54
2

yeah order matters xD while you're getting used to it, it's good practice to load any of your javascript in footer or before the end of body tag to prevent things like this and speed up page load. Once you get used to it you can load jquery down there as well – kennypu Dec 31 '12 at 23:58

score 3 · Answer 2 · answered Dec 31 '12 at 23:49

3

Add your test.js file after the jQuery libraries. This way your test.js file can use the libraries.

answered Dec 31 '12 at 23:49

AgnosticDev

1,843
2
20
36

score 1 · Answer 3 · edited Oct 30 '14 at 08:01

Seeing the answers I have nothing else to add but one more thing:

in your test.html file you have written

link rel="stylesheet" type="css/text" href="test.css"/

see where you have written

type="css/text"

there you need to change into

type="text/css"

so it will look like that

link rel="stylesheet" type="text/css" href="test.css"/

and in this case the CSS file will be linked to HTML file

score 0 · Answer 4 · edited Oct 23 '17 at 20:52

0

<script
 src="CDN">
</script>

for change the CDN check this website.

the first one is JQuery

edited Oct 23 '17 at 20:52

Priyantha

4,839
6
26
46

answered Jan 21 '16 at 00:19

Alejandro Serret

1,139
15
16

score 0 · Answer 5 · answered Nov 20 '16 at 05:29

I had a similar issue, but in my case, it was my CSS file.

I had loaded my CSS file before the JQuery library, since my jquery function was interaction with my css file, my jquery function wasn't working. I found this weird, but when I loaded the CSS file after loading the JQuery library, it worked.

This might not be directly related to the Question, but it may help others who might be facing a similar problem.

My issue:

    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="slider.js"></script>

My solution:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="slider.js"></script>

linking jquery in html

5 Answers5

Linked

Related