Coffeescript Object method is not a function

Question

I have a CoffeeScript object which is giving me a strange error after an action is triggered.

The object loads without incident, although once the action is completed that triggers the callback I receive the error:

this.update is not a function return this.update(value);

Does anyone have an idea why this error has occurred? My best guess is the this object inside the jQuery.rating call is actually referring to a jQuery object, rather than the rating object?

My CoffeeScript code is:

jQuery ->
    new Rating()

class Rating
    constructor: ->
        $('.auto-submit-star').rating
            callback: 
                (value, link) -> @update value

    update: (value) =>
        $.ajax
            type: 'post'
            url: $('#new_rating').attr('action')
            data: 'rating': value
        .done ( msg ) -> 
            alert( msg )

The code compiles to:

var Rating,
  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

Rating = (function() {

  function Rating() {
    this.update = __bind(this.update, this);
    $('.auto-submit-star').rating({
      callback: function(value, link) {
        return this.update(value);
      }
    });
  }

  Rating.prototype.update = function(value) {
    return $.ajax({
      type: 'post',
      url: $('#new_rating').attr('action'),
      data: {
        'rating': value
      }
    }).done(function(msg) {
      return alert(msg);
    });
  };

  return Rating;

})();

mu is too short · Accepted Answer · 2013-02-19 07:05:57Z

4

Your rating plugin is probably calling the callback as a simple function or in the context of the DOM element so @ (AKA this) is probably window or your .auto-submit-star element. In any case, @ isn't your Rating object and doesn't have an update method so you're getting an error.

The standard approach is to use a bound function via the fat-arrow (=>):

$('.auto-submit-star').rating
    callback: 
        (value, link) => @update value

answered Feb 19, 2013 at 7:05

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Asciant Over a year ago

Thanks for the info, you are correct the fat arrow resolved the issue. Appreciate the info.

edgarhsanchez · Accepted Answer · 2015-05-31 16:16:53Z

0

I ran into a similar error : with 'fn.apply is not a function' and it turned out to be that I had a constructor parameter with the same name as a method.

do->
  angular.module 'myservices'
  .service 'averyspecialservice', ['$log', '$rootScope'
    class AVerySpecialService
      constructor: (@log, @rootScope)->

      log: (message)=>
        //do some magic here
        return
  ]
  return

So 'log' was defined as both a method and injected value and finding the cause of the error with such a vague error message proved fun... Isn't JavaScript wonderful.

answered May 31, 2015 at 16:16

edgarhsanchez

1,5632 gold badges12 silver badges9 bronze badges

Collectives™ on Stack Overflow

Coffeescript Object method is not a function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related