linking jquery in html

T

5

28

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()"... =/

Tuba answered 31/12, 2012 at 23:47 Comment(1)

if the accordion is working, then so is jquery. – Prospector 31/12, 2012 at 23:48

P

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>

Prospector answered 31/12, 2012 at 23:49 Comment(2)

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... – Tuba 31/12, 2012 at 23:54

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 – Prospector 31/12, 2012 at 23:58

J

3

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

Johnie answered 31/12, 2012 at 23:49 Comment(0)

T

1

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

Thereinto answered 15/8, 2013 at 14:32 Comment(0)

T

0

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

for change the CDN check this website.

the first one is JQuery

Title answered 21/1, 2016 at 0:19 Comment(0)

A

0

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>

Although answered 20/11, 2016 at 5:29 Comment(0)

Recommended topics

Hot tags