3

I was wondering how to make the Jquery library work. I have of course research on this before asking this question, and I have a book that suggest doing the following:

<script src="scripts/jquery-1.6.2.min.js"><script>

however, for some reason, the stuff on my page does not respond to my code even with this. So I was very confused. What I tried was, moving the files I was working on to the same directory as the jquery-1.6.2.min.js, since jquery is a js library, but didnt work. I was wondering what could it be? I have search for syntax errors like mad, so I reallllllyyyy doubt thats the problem. I was wondering what I did wrong? The only other option I can think of is using the website tag (which I havnt tried yet):

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head> 

or

<head>
  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery- 1.6.2.min.js"></script>
</head> 

Which I wanted to avoid because I didnt want to rely of being on the web when I do my work, we never know... Thanks!

This is the full code by the way:

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery goes to DOM-ville</title>
    <style>
      #change_me {
        position: absolute;
        top: 100px;
        left: 400px;
        font: 24px arial;
      }
      #move_up #move_down #color #disappear { padding: 5px; }
    </style>
    <script src="scripts/jquery-1.6.2.min.js"></script>
  </head>
  <body>
    <button id="move_up">Move Up</button>
    <button id="move_down">Move Down</button>
    <button id="color">Change Color</button>
    <button id="disappear">Disappear/Re-appear</button>
    <div id="change_me">Make Me Do Stuff!</div>
    <script>
      $(document).ready(function() {
        $("#move_up").click( function() {
          $("#change_me").animate({top:30},200);
        });//end move_up
        $("#move_down").click( function() {
          $("#chage_me").animate({top:500},2000);
        });//end move_down
        $("#color").click( function() {
          $("#change_me").css("color", "purple");
        });//end color
        $("disappear").click( function(){
          $("#change_me").toggle("slow");
        });//end disappear
      });//end doc ready
    </script>
  </body>
</html>
Matenia Rossides
  • 1,406
  • 9
  • 35
Charlie Parker
  • 5,884
  • 57
  • 198
  • 323
  • 1
    Why did you put your scripts at the end of ``? Put it inside ``. – Derek 朕會功夫 Jul 07 '12 at 00:10
  • 1
    Replace `` with ` – TryHarder Jul 07 '12 at 00:12
  • @Derek it's a common practice to put the scripts at the end of the body. obviously it's also a common practice to put them in the head as well – Ian Jul 07 '12 at 00:12
  • @derek http://stackoverflow.com/a/5046472/308701 – Matenia Rossides Jul 07 '12 at 00:13
  • 4
    `$("disappear")` should be `$("#disappear")`. – Jared Farrish Jul 07 '12 at 00:13
  • @Chicharito I'm not sure if it'll help, but you should use: type="text/javascript" when declaring script tags – Ian Jul 07 '12 at 00:13
  • 1
    @ianpgall - It is not required in HTML5. – Derek 朕會功夫 Jul 07 '12 at 00:14
  • 1
    You've got problems with your code, like my above observation and spelling errors like `$("#chage_me")`. We're not here to troubleshoot your code's idiosyncrasies. Voting to close as "Not a real question". – Jared Farrish Jul 07 '12 at 00:19
  • @JaredFarrish hopefully no one follows your example. He has a clear question. If there are other issues with his code, it's coincidental. Point out what you see, or move on – JoeCortopassi Jul 07 '12 at 00:23
  • 1
    @moomoochoo It worked with the – Charlie Parker Jul 07 '12 at 00:23
  • @JoeCortopassi - I think you have me confused with a neophyte. `:)` See the http://stackoverflow.com/faq. – Jared Farrish Jul 07 '12 at 00:23
  • @JaredFarrish I understand you have reputation, but this is clearly a question from a neophyte that doesn't know better. Probably doesn't even know he needs to include the jquery file. He's gonna make mistakes, but he has a valid question. Really frustrates me when people are eager to whip out the close hammer so quick. If you really want to close, this probably falls better under the "dupe" category – JoeCortopassi Jul 07 '12 at 00:26
  • @JoeCortopassi - "Doesn't know better" isn't a valid question *subject*. You may want to help, but it's not an SO-quality question. `:)` In the event, there is already questions that solve this problem. If you want to take it off-stream for personnel assistance, please open a chat room. – Jared Farrish Jul 07 '12 at 00:28
  • 2
    @JaredFarrish I am sorry if you dont like the code. I hope that the way I phrased my question shows that I did not intend this question for other people to debug my code. Those are not my intentions at all. I also showed I did research for a solution, which I hope portrays that I am not a lazy ass just hoping for others to solve my problem. But I legit, want to know what was wrong with my original tag, which I do believe is a legit question. If you know why it did not work I would greatly appreciate your answer. The original tag was: – Charlie Parker Jul 07 '12 at 00:28
  • @Chicharito - It doesn't matter if I "like" the code or not; it's a standards question. Nothing personal, it's just not a relevant question for SO to answer for the 348th time. `:)` – Jared Farrish Jul 07 '12 at 00:33
  • 1
    +1 @Chicharito. Guys, try to stay on topic. OP is just trying to learn. No one has born spitting out dollar signs yet. On topic, in the folder where your HTML file is saved, does it contain a folder named "scripts" and a proper copy of the jQuery lib named `jquery-1.6.2.min.js` inside of it? – Fabrício Matté Jul 07 '12 at 00:34
  • @FabrícioMatté - Thanks for the heads up. Why the hell I'm still around, I do not know. – Jared Farrish Jul 07 '12 at 00:37
  • 2
    @JaredFarrish You can close it as an exact duplicate if you find an exact duplicate and I'll agree with it. Apart from that, this is a very valid question imo. – Fabrício Matté Jul 07 '12 at 00:38
  • @FabrícioMatté - Sorry, I've stated my opinion. Having a "problem" is not the same as "valid question". Moving on. – Jared Farrish Jul 07 '12 at 00:39
  • 1
    @JaredFarrish Honestly, the first time I tried to start coding in jQuery, I remember having issues including the jQuery lib. This is why I judge this as an useful question for future reference. – Fabrício Matté Jul 07 '12 at 00:40
  • And back on-topic, @OP you should use a CDN hosted copy of jQuery lib if you'll make your site public - this provides much better caching and load time for your page. Here's a good read: [3 reasons why you should let Google host jQuery for you](http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/) – Fabrício Matté Jul 07 '12 at 00:43
  • @FabrícioMatté - You are of course 100% correct; it is, of course, "Too localized". You can argue all you want this is a "new" problem, but it's not. The OP needs to learn how to troubleshoot script and style includes. Your comment-only responses only builds my case. Albeit, under the wrong "Close" heading. Closing a question is not a terminal offense. – Jared Farrish Jul 07 '12 at 00:48
  • @FabrícioMatté Oooohhhhh I understand the problem now! Thank you so much Fabricio, I think my confusion was on how to tell my html file where my jquery library was. I moved it to the same file where the library was (inside the scripts directory). Now I understand how to tell the hmtl file a directory properly. Thanks you sooo much!!!! :) – Charlie Parker Jul 07 '12 at 00:48
  • 1
    @JaredFarrish I never said this was an original issue, I even said to close it as duplicate if you can find one. Too localized? Maybe. At least OP has put enough effort showing what he has tried AND code, something that more than half of the newest questions don't. The main point of SO is helping others, and this is a valid question to my standards. @ OP, no problem, just accept any of the current answers which already tell you more in-depth. – Fabrício Matté Jul 07 '12 at 00:53
  • @FabrícioMatté - `:)` `:)` `:)` No comment. (Note, see me when you've seen the same questions ad nauseum over and over and over and over and over...) – Jared Farrish Jul 07 '12 at 00:55
  • @JaredFarrish No comment either, let's share some Wine and finish this, as the OP has already solved his issue and our discussion could go all night long without any beneficial result. Cheers `:)` – Fabrício Matté Jul 07 '12 at 00:58
  • @FabrícioMatté - See my edit. Sometimes experience isn't immediately tangible. – Jared Farrish Jul 07 '12 at 00:58
  • @JaredFarrish Of course you've been here for over 3 years and half more than me, still, nothing prevents you from voting to close this as too localized/dupe, neither prevent others from answering the question. Do you prefer Vodka over Wine? – Fabrício Matté Jul 07 '12 at 01:02
  • @FabrícioMatté Thanks you so much for your time and efforts in helping me. I learned so much :) Thanks for appreciating my efforts too, it means a lot :) Thanks for your article too, I appreciate it. I will take your advice! Have a good day/night! :) :) :) – Charlie Parker Jul 07 '12 at 01:04
  • @FabrícioMatté - I'll check in when you're ~15k rep and see if you're so amenable to the "low-hanging fruit". You think you've got an angle, I assure you it's less assured than your current posturing. I know, because I once argued your exact position. Maybe you can avoid the "jade", but I doubt you'll be raving the same position at that point. – Jared Farrish Jul 07 '12 at 01:06
  • @FabrícioMatté - And, might I add, there have been several times I've voted to close a question while simultaneously answering the question through (sometimes extensive) comments. So I don't feel I need preaching; I think I'm responsible enough with my votes. – Jared Farrish Jul 07 '12 at 01:11
  • @JaredFarrish I'll say that you have a point, as I've spent over 6 years in another community and at some point I'd judge what newcomers would be in a couple years' time. I say, you can't foresee the future or fate. Most likely we will not meet in that time. I can't say that you're wrong, for I can't foresee the future either. I'm not defending any position, what I'm defending is that OP is explicitly asking for help after exhausting his efforts and demonstrating it, which is the very core of the SO guidelines afaik. Obviously the question may sound extremely "noobish" for experienced members. – Fabrício Matté Jul 07 '12 at 01:14
  • @JaredFarrish And I could see this question being closed as dupe or localized or whatever, as the question itself has probably been asked dozens of times. The effort OP has put in the question is enough to deserve an answer though, that's just my opinion. Sorry if it somehow goes completely against yours. And on-topic, OP if you're just starting to learn jQuery, why not use the latest version? Swap that 1.6.2 to 1.7.2 `:)` You can always find the latest version and links to the CDN-hosted copies at http://jquery.com/ – Fabrício Matté Jul 07 '12 at 01:17
  • @FabrícioMatté - I don't know, http://jsfiddle.net/userdude/5ZzKX/ probably shows the current latest if you `View Source->This Frame->View Source` on the bottom-right. I mean, it works for jsFiddle. – Jared Farrish Jul 07 '12 at 01:21
  • Yes, you've included jQuery 1.7.2 in the menu on the left, so assuming jsfiddle always keep up with jQuery updates, you'll know the latest version by checking that list. – Fabrício Matté Jul 07 '12 at 01:24
  • @FabrícioMatté - Bologne. You know that shows the latest as of now. – Jared Farrish Jul 07 '12 at 01:25
  • @JaredFarrish absolutely right. I just linked to http://jquery.com as v1.8 should be released next month, I like to stay tuned to updates. `:)` – Fabrício Matté Jul 07 '12 at 01:26
  • I'll go watch some orchestral, enjoy the night everyone. – Fabrício Matté Jul 07 '12 at 01:29

2 Answers2

2

The problem is most likely the path... Are you just using HTML pages? If so, there are a couple of things to note:

1.) When a path begins with a / it means it starts at the root folder.

2.) When a path does not start with a / it means its going to start relative to the current folder it is in.

To fix:

Inside the folder with your html, make a javascripts folder (you could call it anything, "js" for example), and place your jquery javascript files within it.

Then use this for the path to jquery:

 <script type="text/javascript" src="/javascripts/jquery.min.js"

This will reference the absolute path, so if later on, you have html files in nested folders, it won't look to the relative path but the absolute one.

As well if you want to use the google version when you have internet, and a local version when you don't you can use this snippet:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>  
<script type="text/javascript">
    window.jQuery || document.write("<script src='/PATH/TO/jquery.js'><\/script>")
</script>  

Addendum:

Fixed the post to reflect Fabrício Matté correction.

The absolute path can get a bit funky if you're not running behind a webserver (apache for example). This is why it would work on a server, and not on your computer.

If you're running it locally, without a webserver (don't do this, install MAMP or XAMP, Apache, nginx, IIS, anything...), you'll need to specify the full path:

Mac: /Users/yourusername/Sites/website/index.html

PC: C:/somethign/something/else/index.html

tehprofessor
  • 2,957
  • 1
  • 21
  • 22
  • 1
    `document.write("")` is invalid. The HTML/XML parser will automatically break your script when it reaches the first ``. Use `" – Fabrício Matté Jul 07 '12 at 00:48
  • Thank you so much!!! That was the problem. I was confused about how to tell my file about directory paths, but now I understand!!! Thank you so much! I have one other question, when you say /, i understand it means root, but does that apply for any operating system or only linux??? (hope its not a silly question) – Charlie Parker Jul 07 '12 at 00:51
  • Fixed the post to reflect Fabrício Matté correction. The absolute path can get a bit funky if you're not running behind a webserver (apache for example). If you're running it locally, without a webserver (don't do this, install MAMP or XAMP), you'll need to specify the full path: Mac: /Users/yourusername/Sites/website/index.html PC: C:/somethign/something/else/index.html – tehprofessor Jul 07 '12 at 00:53
1

Do you have your page (the one you copied all code for and showed us) in the same directory as a directory called "scripts"? In that "scripts" directory, do you have a file called "jquery-1.6.2.min.js"?

My guess is one of three things is happening:

  1. You're jquery file is in a different directory
  2. You never included the jquery file
  3. the jquery file name is not exactly the same

If you check in FireBug, I'll bet that this file is missing

JoeCortopassi
  • 5,083
  • 7
  • 37
  • 65
  • 1
    That was exactly the problem!!! I do have firebug, but Im learning how to use it so I guess I didnt know how to read of firebug that it was not working. But now I know how to reference directories better! :) Thnx so much! :) – Charlie Parker Jul 07 '12 at 00:52