Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ethan Paz
Ethan Paz
7,710 Points

External JQuery files won't load. Suggestions?

I'm having a problem with JQuery. And I need your help. I have browsed the internet but can't find a solution that matches my problem. Listen to me now. External JQuery files won't load on my computer.

*Ignore the extra space after the opening lesser than angle (<) as the code is trying to be made visible to you*

So, I have index.html, index.css, & index.js. In Mozilla, with the Firebug download, it says, "No JavaScript on this page"; however, in the Sublime Text Editor, index.js does, indeed, have JavaScript. What's the problem?

Yes, I have included < script type="text/javascript" src="index.js">< /script> in my index.html first in between the < head> tag.And I've also included the JQuery download in my text editor right before the closing < body> tag, < script type="text/javascript" src="jquery.js">< /script>

Also, the source file is in the right location. In a matter of fact, the index files (.html, .css, & .js) are in the same folder.

So, the problem isn't the scripting in the index.html file nor the source, and the problem is not with the index.js file.

Here's a sample in how I would write Javascript in my index.js file:

$(document).ready(function(){ $("p").onClick(function(){ $("this").hide(){ }); });

This code won't work after pointing back to the html file

< p> Random Text< /p>

So, the question I ask to you is this: since my coding is right, the source is correct, and JavaScript enabled in the browser, why is JQuery not working for me.

To further complicate the problem, I can view someone else's JQuery in action on jsfiddle.net and work, but when I try to make my own JQuery file on jsfiddle.net, it won't work! However, when I code at Codeacademy.com under JQuery, everything works.

So do you have a solution to this complication problem? Your help would be greatly appreciated.

4 Answers

William Whitworth
William Whitworth
6,117 Points
William Whitworth
William Whitworth
6,117 Points

You'll have to load JQuery first, and then your plugin. So for example, your markup may look like this:

<!DOCTYPE html>
<head>
<!-- Place your JQuery here -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>

<!-- ...or Here -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>

or

<!DOCTYPE html>
<head>
<!-- Place your JQuery here -->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>

<!-- and your plugin here -->
<script type="text/javascript" src="index.js"></script>
</body>

Make sure JQuery is loaded first.

Ethan Paz
Ethan Paz
7,710 Points
Ethan Paz
Ethan Paz
7,710 Points

I tried your suggestions; however, it's still not working for me.

William Whitworth
William Whitworth
6,117 Points
William Whitworth
William Whitworth
6,117 Points

Remove onClick() and make it just click(), remove the quotes from this, and after hide() remove the single {. 

$(document).ready(function(){ 
    $("p").click(function(){ 
    $( this ).hide();
    });
});

This should work.

Check Firebug or Web Inspector to see if jQuery is loading. Make sure the jQuery file (I'll assume it is jquery.js) loads before the index.js file (assuming this is where your external custom code is).

If it still doesn't work, please provide a Markdown of your work or a JSFiddle/Codepen.

Hope that helps!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

It's impossible to find matching brackets with without proper indentation, so I reformatted your code.

$(document).ready(function () {
    $("p").onClick(function () {
        $("this").hide()
    {});
});

In this form I noticed 3 issues.

  • Line 4: you've got an extra opening curly bracket.
  • Line 3: you are missing a semicolon
  • Line 3: this is a constant not a string, so no quotes