Home/ Questions/Q 6952907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:24:36+00:00

I’m now making the transition towards writing all my javascript code using Coffeescript, But

  • 0

I’m now making the transition towards writing all my javascript code using Coffeescript, But I’m frustrated because the simplest of examples is causing me problems. As of now, I’ve done more than an hour of research without being able to find the answer to this…

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script>
  <link href="sheet.css" rel="stylesheet" type="text/css" media="screen" />
  <script type="text/coffeescript">
    $ ->
      sayHi()

    sayHi = ->
      alert 'Hi there!'
  </script>
</head>    
<body>
  <div id="all">  
  </div>  
</body>
</html>

As it is clear from the code above, I’m just trying to make the call to the sayHi() function work from inside the jQuery’s ready handler. But the error I’m getting is the following:

Uncaught TypeError: undefined is not a function

Please help me, According to the compiler and tutorials I’ve read this ‘should‘ work, But I don’t know what I’m doing Horribly wrong for this to not run 🙁

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    text/coffeescript tags have a key difference from text/javascript tags. They dont “run” until the document loads. This is because the coffee script library has to find all the coffee script tags and compile them, and it has to wait until the DOM ready so it can be sure to find them all.

    The other issue is that jQuery will fire the DOM ready callback immediately if the event already happened. And in this case it has.

    So when this is compiled to JS you get this:

    var sayHi;
$(function() {
  return sayHi();
});
sayHi = function() {
  return alert('Hi there!');
};

    So what happens is:

    • declare the sayHi variable with no value, making it undefined.
    • Create the DOM ready callback for jQuery that uses this variable.
    • jQuery runs the callback function immediately because DOM ready has already happened.
    • The callback function executes, and tries to run sayHi() which is still undefined.
    • After the callback runs, sayHi is then set to the function you wanted to run.

    Now if this was a normal JS tag, it could have run before the document loaded, and then it would have worked fine because by time the callback actually ran, then sayHi would have been assigned properly.

    To fix it you should assign the function BEFORE you run pass in the callback. Or you can skip doing the $(->) entirely since you know DOM ready fired already. But really, this is one major reason you really shouldn’t use coffeescript tags. It’s really not the same as using a JS tag. And one of many reason this is not the recommended approach for using CoffeeScript on a real website.

    So compile your coffee script before your browser sees it like a responsible developer 🙂

    • 0