CODEWITHSUNDEEP
jquerycoffeescript
jlstr
jlstr

Reputation: 3056

Why is this function call not working using Coffeescript?

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 :(

Upvotes: 7

Views: 7237

Answers (2)

Alex Wayne
Alex Wayne

Reputation: 187312

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 :)

Upvotes: 11

Babak Naffas
Babak Naffas

Reputation: 12581

Flip the statements. Looks like CoffeeScript has the same limitations as good old C where you can't make a call to a function/method until it has been defined in the order of your code.

So use 

<script type="text/coffeescript">
  sayHi = ->
    alert 'Hi there!'

  $ ->
    sayHi()
</script>

Upvotes: 4

Related Questions