Jquery script not working

Question

For some reason my code that i am running right now is not working. I have a menu on the left hand side and it should be when someone clicks it it will stay active on that menu. However it is not working.

<head>
    <link rel="stylesheet" href="Style/style.css" type="text/css"/>
<script type="text/javascript" src="http://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js"></script>
<script>
(function () {
    $('ul.menu li').click(function () {
        $('ul.menu li').removeClass('active');
        return $(this).addClass('active');
    });
}.call(this));
</script>

</head>
<body>
......
    <ul class="menu">
      <li><i class="fa fa-home"></i>Dashboard</li>
      <li><i class="fa fa-envelope"></i>Messages</li>
      <li><i class="fa fa-user"></i>Profile</li>
      <li class="active"><i class="fa fa-group"></i>Friends</li>
      <li><i class="fa fa-cog"></i>Settings</li>
    </ul>
  </nav>
.....

Would anyone know why this is? Thanks

`return $(this).addClass('active');` makes no sense. Why are you returning a jQuery object? — epascarello, Feb 01 '16 at 00:13
Are you getting any javascript errors in your console? If so could you post them? — B. Aikey, Feb 01 '16 at 00:13
use `document.ready` ... an IIFE is not the same thing. Your code is running before elements exist — charlietfl, Feb 01 '16 at 00:15
github is not a CDN, they are loading it as a document.. Not a javascript mime type. As suggested, you need to change where you load this file from.. Always test a script locally to the project and then when about to go live, use a CDN such as googles. — Angry 84, Feb 01 '16 at 00:29

Nikolay Ermakov · Answer 1 · 2016-02-01T00:19:51.513

1

You try to append click event handler to your li elements when they are not in the DOM yet - your html markup comes later.

Move your script to just before closing </body> tag. Also I would shorten it to just:

$('ul.menu li').click(function () {
    $('ul.menu li').removeClass('active');
    $(this).addClass('active');
});

By the way - do you include jQuery lib anywhere on your page? If not, the script won't work too. Include jQuery lib somewhere in the head section on your page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>

edited Feb 01 '16 at 00:19

answered Feb 01 '16 at 00:14

Nikolay Ermakov

5,031
2
11
18

Also great :) thanks – TroubleEagle Feb 01 '16 at 00:34

Praveen Kumar Purushothaman · Accepted Answer · 2016-02-01T00:32:06.383

1

Instead of using .call(this), you can wrap it up inside $(document)'s ready function this way:

$(function () {
    $('ul.menu li').click(function () {
        $('ul.menu li').removeClass('active');
        $(this).addClass('active');
    });
});

And remove the return statement. Also, I couldn't find jQuery added to the page. Kindly add jQuery like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

After replacing your GitHub based URL, with RawGit's URL, your final code should look like:

<head>
  <link rel="stylesheet" href="Style/style.css" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdn.rawgit.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>
  <script>
    $(function () {
      $('ul.menu li').click(function () {
        $('ul.menu li').removeClass('active');
        $(this).addClass('active');
      });
    });
  </script>

</head>
<body>
  ......
  <ul class="menu">
    <li><i class="fa fa-home"></i>Dashboard</li>
    <li><i class="fa fa-envelope"></i>Messages</li>
    <li><i class="fa fa-user"></i>Profile</li>
    <li class="active"><i class="fa fa-group"></i>Friends</li>
    <li><i class="fa fa-cog"></i>Settings</li>
  </ul>
  </nav>
.....

edited Feb 01 '16 at 00:32

answered Feb 01 '16 at 00:16

Praveen Kumar Purushothaman

164,888
24
203
252

I agree with this post, also the coffee script is hosted on github which does not work as a CDN.. The op will need to download it locally to their server.. Check the browser console when viewing the JS directly to see the mime type of document... Its trying to load the JS as a HTML file... – Angry 84 Feb 01 '16 at 00:30
@Mayhem Check the update. – Praveen Kumar Purushothaman Feb 01 '16 at 00:32
Perfect thank u very much! Ur a boss xx – TroubleEagle Feb 01 '16 at 00:33
@TroubleEagle You are welcome! `:)` – Praveen Kumar Purushothaman Feb 01 '16 at 00:34
1

Glad its working now, didnt see any point in writing an answer after seeing this one was correct – Angry 84 Feb 01 '16 at 02:00

score 0 · Answer 3 · answered Feb 01 '16 at 00:25

It looks like the page is refusing to execute the script from the github url. I ran your code locally and was having issues getting the browser use the url you provided. You could use Google's CDN,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Or it looks like there is another stackoverflow post about getting github repos working, Link and execute external JavaScript file hosted on GitHub

Goodluck

Jquery script not working

3 Answers3