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

linking Jquery to external JS file

So I'm having this issue with using Jquery on an external js file. I'm hoping someone here can help me out. Jquery is fine when wrote inline on the index.html but not in the external file. "vanilla" js works fine in the external file so I'm guessing it had something to do with my script tag for Jquery in the head tag, take a look:

<head>
    <title>Jquery test</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">          
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</head>

if any knows what's going on, I would appreciate it.

Thanks in advance.

4 Answers

What Jason wrote is a correct solution, you could try as well to put your script tags loading the JS at the end of you index.html, before the closing body tags. However the order of the JS files will probably be still very important to have everything functional.

Geoffrey,

I tried your approach and it worked. thanks! but do you know why this occurs? Having the script tags read only in the body of the html and not the head?

That should as well work if you put your Javascript in the head, you just actually need to be sure that the DOM is fully loaded before doing anything with Javascript most of the time, either by using the JQuery function to ensure the DOM is loaded as Jason showed you, or by putting the script a the end of the page, this way you are sure the DOM is already loaded.

The other point to check as well, is that you need to be sure to load your files in the right order. For example, load first JQuery if this is used in others files. If you set some functions you use across your project, in different files, be sure to load the file containing them firstly, otherwise you might call some functions that don't exist yet.

Lastly, you tell It doesn't work when you put your files in the head of the index.html, but if you check the console by pressing "F12", do you see an error message displayed ? If so, what's the error ?

Geoffrey,

Thanks for the breakdown, I really appreciate it, and thanks for teing me about the f12 console error check.

// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );
});

did you type ready on request? because it won't load if you don't use ready.

Jason, thanks! I tried ready on request as in your code block, and it logged ready! to the console but when I tried to write any other Jquery it will not pass. is there anything else I need to do in order for it to work.

thanks.

make sure the the js file is correct directory. That's going to be on going problem for you later in programing when start using includes.

Jason thanks! Yeah I agree. Thanks for your help. Learned something new. Appreciate it.

No problem man.