How to implement a tagging plugin for jQuery

Question

Goal: To implement a jQuery plugin for my rails app (or write one myself, if necessary) that creates a "box" around text after a delimiter is typed.

Example: With tagging on SO, the user begins typing a tag, then selects one from the drop-down list provided. The input field recognizes that a tag has been selected, puts a space and then is ready for the next tag. Similarly, I am attempting to use this plugin to put a box around the previously entered tag before moving to to accept the next tag/input.

The instructions in the README.txt seem simple enough, however I have been receiving a

$(".tagbox").tagbox is not a function

error when debugging my app with firebug.

Here is what I have in my application.js:

$(document).ready( function(){

    $('.tagbox').tagbox({
        separator: /\[,]/  // specifying comma separation for <code>tags</code>
    });

});

And here is my _form.html.erb:

<% form_for @tag do |f| %>
  <%= f.error_messages %>
  <p>
    <%= f.label :name %><br />
    <%= text_field :tag, :name, { :method => :get, :class => "tagbox" } %>
  </p>

  <p><%= f.submit "Submit" %></p>
<% end %>

I have omitted some other code (namely the implementation of an autocomplete plugin) existing within my _form.html.erb and application.js for sake of readability. The inclusion or exclusion of this omitted code does not affect the performance of this plugin.

I have included all of the necessary files for the tagbox plugin (as well as application.js after all other included JS files) within the javascript_include_tag in my application.html.erb file.

I'm pretty much confused as to why I'd be getting this "not a function" error when jquery.tagbox.js clearly defines the function and is included in the head of my html page in question. I've been struggling with this plugin for longer than I'd like to admit, so any help would really be appreciated. And, of course, I'm open to any other plugins or from-scratch suggestions you may have in mind..

This tagbox plugin does not seem to have a wealth of documentation or any currently working examples.

Also to note, I'm trying to avoid using jrails.

Thanks for your time

Answer 1

Make sure you are loading the plugin and Jquery in the correct order. Loading the plugin before Jquery can cause this type of error. Also, make sure the plugin is compatable with the JQuery version you are using. If all of that is correct, I would do a basic JQuery function to ensure that you path to it is correct. Else, use firebug and try to trace down where the load is failing.

Answer 2

If you're willing to use another plugin, and don't want to worry anymore about space/comma delimeters, you can give http://simplicityengineer.com/tag/ a try :)