jQuery Issue not working

Question

I am new to jQuery and learning. For some odd reasons the following code doesn't work (I am using Coda2):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $("#click").click(function () {
            $("p").slideToggle("slow");
        });   
    </script>   
</head>

<body>

    <p>Choose Your Language</p>
    <button id="click">Click Me</button>

</body>
    </html>

Any help

If you are new, then you should read the [jQuery tutorial](http://learn.jquery.com/about-jquery/how-jquery-works/). It explains how the get started with jQuery. Also [learn how to **debug** JavaScript](http://www.netmagazine.com/tutorials/javascript-debugging-beginners), it's indispensable for solving problems yourself. — Felix Kling, Sep 04 '13 at 13:42
The added twist here is the missing http: or https: from the cdn — mplungjan, Sep 04 '13 at 13:49

score 5 · Answer 1 · answered Sep 04 '13 at 13:40

5

Wrap with a document.ready

$(document).ready(function () {
    $("#click").click(function () {
        $("p").slideToggle("slow");
    });
});

Documentation

answered Sep 04 '13 at 13:40

Anton

30,499
5
42
54

Anton, thanks, but still didn't resolve the issue – Abdulla Sep 04 '13 at 13:44
1

@Abdulla: Well, what **is** the issue? You didn't mention what the problem actually is, so people jump on the first issue they see. If you want better help, provide useful information. FYI, the solution works exactly how *I* expect it to: http://jsfiddle.net/tPquE/. – Felix Kling Sep 04 '13 at 13:45
@FelixKling the issue that the code is not working (i.e.: not toggling the text). – Abdulla Sep 04 '13 at 13:47
the second issue was file://ajax... see @Jim Cote's solution – mplungjan Sep 04 '13 at 13:47
1

@Abdulla: If the URL scheme really is the problem, then you should have gotten an error in the console, something like `ReferenceError: $ is not defined`. For future questions, please add the error messages you get. See the link in [my other comment](http://stackoverflow.com/questions/18615466/jquery-issue-not-working/18615504#comment27401236_18615466) for more information. – Felix Kling Sep 04 '13 at 13:51
@mplungjan file://ajax was copied from google library (https://developers.google.com/speed/libraries/devguide) – Abdulla Sep 04 '13 at 13:56
@FelixKling I got no error for the url – Abdulla Sep 04 '13 at 13:56
@mplungjan & FelixKling thank you both, but I added http:, and it is now working – Abdulla Sep 04 '13 at 13:58

score 2 · Answer 2 · edited Sep 04 '13 at 13:46

2

If you test from your harddisk instead of a server, use a fully qualified URL to the js file. That is, add http: otherwise file: will be prepended

Wait until the document is loaded before running your script:

$(function () {
    $("#click").click(function () {
        $("p").slideToggle("slow");
    });  
});

edited Sep 04 '13 at 13:46

mplungjan

134,906
25
152
209

answered Sep 04 '13 at 13:44

Jim Cote

1,716
3
15
26

score 1 · Answer 3 · answered Sep 04 '13 at 13:42

What Anton said. Or:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<p>Choose Your Language</p>
<button id="click">Click Me</button>
<script>
    $("#click").click(function () {
        $("p").slideToggle("slow");
    });   
</script>   
</body>
</html>

jQuery Issue not working

3 Answers3