Home/ Questions/Q 8794867
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T23:18:34+00:00

I’m a CoffeeScript and JavaScript novice. Working here is with a blank Rails 3.2.8

  • 0

I’m a CoffeeScript and JavaScript novice.

Working here is with a blank Rails 3.2.8 app.
Here is the straight layout code:

<!DOCTYPE html>
<html>
    <head>
      <title>Editor</title>
      <%= stylesheet_link_tag    "application", :media => "all" %>
      <%= csrf_meta_tags %>
    </head>
    <body>
        <%= yield %>
      <%= javascript_include_tag "application" %>
    </body>
</html>

Could not be more simple, right? Now the view for the form:

<%= form_for(@note) do |f| %>
  <% if @note.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@note.errors.count, "error") %> prohibited this note from being saved:</h2>

      <ul>
      <% @note.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.text_area :body, class: 'tkh-editable' %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

While researching this topic I saw that many coders had problems with jQuery being loaded twice or in the wrong order.
Here are the non-comments in my application.js manifest file:

//= require jquery
//= require jquery_ujs
//= require tkh_editor/tkh_editor

In the tkh_editor.js.coffee file, if I just put this code, it works just fine:

jQuery ->
  $(".tkh-editable").css("border","solid 5px red")

It adds a border around my textarea field with the class above.
I’m trying to create a plugin and I’m stuck at step 1.

Why is the following code not working?

jQuery.fn.extend
  tkhEditor: ->
    return @each ->
      this.css("border","solid 5px red")

jQuery ->
  $(".tkh-editable").tkhEditor()

The Chrome console gives me the following error:

Uncaught TypeError: Object # has no method ‘css’

Please help and explain what I’m doing wrong.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You probably just need to wrap this in jQuery. Try replacing:

    this.css("border","solid 5px red")

    with:

    $(this).css("border","solid 5px red")
    • 0