Coffeescript and jQuery TypeError

Question

I recently had a little problem using a jquery plugin with coffeescript (within the Rails 3.1 asset pipeline, if that helps). I looked around a bit, but couldn't really figure out, why it behaves this way.

So, why does this not work (talking about the corner call on $('.overlaybox')):

$ ->
  $('#slides').sortable
    axis: 'y'
    update: ->
      $.post($(this).data('update-url'), $(this).sortable('serialize'))

  $(".overlaybox").corner()

but this does work (took the corners call out of the jQuery ready thing):

$ ->
  $('#slides').sortable
    axis: 'y'
    update: ->
      $.post($(this).data('update-url'), $(this).sortable('serialize'))

$(".overlaybox").corner()

I keep getting a

TypeError: 'undefined' is not a function (evaluating '$(".overlaybox").corner()')

if I leave it in there.. Maybe I'm just blind right now, but I can't figure out why I can't leave it in there. Even the compiled code looks legit (at least to me it does ;-)).

Thanks so much for your time and clarifying.

Marcel

UPDATE Here's some relative code:

# app/assets/javascripts/application.js
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.Jcrop
//= require jquery.corner
//= require jqtextile
//= require_tree .

# app/assets/javascripts/slides.js
$ ->
  $(".overlaybox").draggable 
    containment: 'parent',
    drag: -> 
        offset = $(this).position()
        xPos = offset.left
        yPos = offset.top
        $('#slide_xpos').val(xPos)
        $('#slide_ypos').val(yPos)


  $('#slides').sortable
        axis: 'y'
    update: ->
        $.post($(this).data('update-url'), $(this).sortable('serialize'))

  $(".overlaybox").corner()

And then the view (app/views/slides/_form.html). The funny thing is, that corners works, as soon as I take it out of the jquery document ready event. I think I'm missing something substantial regarding the scope of all of this: When I do a console.log inside the $ -> on corner, I get an undefined. But when I do the same outside of the $ -> (actually below), I get the proper output AND it gets fired even before the jquery (of course). But why is it not available in the jQuery block? Is it a scope thing with coffeescript I'm missing? (I'm having the same problem with a different plugin right now)

Thanks so much again!

here's also the compiled javascript code, if that helps

$(function() {
    console.log($('.overlaybox'));
    console.log($('.overlaybox').corner);
    $(".overlaybox").draggable({
      containment: 'parent',
      drag: function() {
        var offset, xPos, yPos;
        offset = $(this).position();
        xPos = offset.left;
        yPos = offset.top;
        $('#slide_xpos').val(xPos);
        return $('#slide_ypos').val(yPos);
      }
    });
    $('#slides').sortable({
      axis: 'y',
      update: function() {
        return $.post($(this).data('update-url'), $(this).sortable('serialize'));
      }
    });
    return $(".overlaybox").corner();
  });

Answer 1

Well, the problem was, that I had some precompiled assets (older stuff) in my rails public folder, that was kinda messing with my jQuery calls. Cleared it, learned my lessen, everything works now as expected.

Anyway, thanks so much guys, I really appreciate your help!