CODEWITHSUNDEEP
jquery
Saelyth
Saelyth

Reputation: 1734

Jquery not loading properly

I have this code: https://jsfiddle.net/g412rft4/1/ which as you can see works perfectly.

However I am trying to replicate it on my desktop with a test.html file and a Common.js file as well and it doesn't works. It seems like Jquery is never loaded and I don't get why.

This is the code for the .js file:

$( "#SaeReplacerBuilder" ).click(function() {
  alert("ok");
});

And this is the code for the .html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Whatever</title>
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="Common.js"></script>
</head>

<body>
<div id="SaeReplacerBuilder" style="background-color:#A0A0AA;border-radius:15px;padding-right:7px;padding-left:7px;border:2px solid #FF0000;color:#000000;">'''CLICK Here'''</div>
</body>
</html>

Upvotes: 0

Views: 54

Answers (4)

Tieson T.
Tieson T.

Reputation: 21191

Protocol-relative links (those that begin with //) only work when the page is being served by a web server. I'm assuming you're just viewing the file from your hard-drive.

Add a protocol and it would work:

https://code.jquery.com/jquery-2.1.4.js

If what you've shown is the exact contents of your Common.js file, you need to either:

a) Wrap the code in a ready event:

$(function(){
    $( "#SaeReplacerBuilder" ).click(function() {
        alert("ok");
    });
})

b) Move your Common.js script to the bottom of the page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Whatever</title>
        <script src="//code.jquery.com/jquery-2.1.4.js"></script>
    </head>
    <body>
        <div id="SaeReplacerBuilder" style="background-color:#A0A0AA;border-radius:15px;padding-right:7px;padding-left:7px;border:2px solid #FF0000;color:#000000;">'''CLICK Here'''</div>
        <script src="Common.js"></script>
    </body>
</html>

Otherwise, you're attempting to bind a click event before the DOM is ready. I normally do both (use the ready event and move the scripts to the bottom), just to be safe.

Upvotes: 3

Sverri M. Olsen
Sverri M. Olsen

Reputation: 13263

When your Common.js Javascript file is run the document looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Whatever</title>
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="Common.js"></script>

You have to wait until the document has fully loaded before adding click handlers. jQuery gives you a way to easily do that:

$(function () { // This function will be run when the document is done loading
    $( "#SaeReplacerBuilder" ).click(function() {
        alert("ok");
    });
});

Further more, it is generally a good idea to put your Javascript near the bottom of your HTML code, like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Whatever</title>
</head>
<body>
    <div id="SaeReplacerBuilder" style="background-color:#A0A0AA;border-radius:15px;padding-right:7px;padding-left:7px;border:2px solid #FF0000;color:#000000;">'''CLICK Here'''</div>
    <script src="//code.jquery.com/jquery-2.1.4.js"></script>
    <script src="Common.js"></script>
</body>
</html>

Putting it in the <head> stops the rendering of the website until the Javascript file has been loaded. Putting it near the bottom allows the website to render the content (which is usually very fast) before the Javascript is loaded, which makes the website appear to load faster.

Upvotes: 1

Cedric
Cedric

Reputation: 545

For security reasons, script loaded by script tag doesn't run in a navigator context when loaded from a file://

You have to upload it on a real server and acces it with http://

Upvotes: 0

Brian
Brian

Reputation: 1553

The script tag needs to be relative to your html file, and I'm guessing this isn't loading locally:

<script src="//code.jquery.com/jquery-2.1.4.js"></script>

Try adding the protocol like this:

<script src="http://code.jquery.com/jquery-2.1.4.js"></script>

Upvotes: 1

Related Questions