#258 Token Fields

Glad to get to know this cool autocompleting plugin, much more beautiful and user oriented than any of the previous ones that I have seen, I guess.
Thanks for showing us how to use it easily, and thanks for all your wonderful work during all the past 258 weeks.

By the way, I think that you forgot to write down the model code.

This is a very nice solution when the number of entries is small. But when that number grows and/or you are not sure what options are available, a good alternative is to use two select menus in tandem. You populate the second from the first and can fine tune that list before submitting.

There are a number of jQuery solutions for doing this. I just posted one last week and hope to have an example Rails helper in the next day or two.

http://craic.github.com/tandem_select_jquery_plugin/

Really nice interface.

I've also used a couple more jQuery solutions for multiple selection:

* Bsmselect: https://github.com/vicb/bsmSelect
* Multi select: https://github.com/michael/multiselect/

These two solutions have advantages over tokeninput:

* No need to change server code, nor to implement any search actions.
* They work without javascript as well, just as a normal multiple select.

On the other hand, it looks to me tokeninput is very user friendly. That gives me an idea to combine the advantages of both worlds...

Thanks!

Dang.....I needed this episode two weeks ago. Maybe I'll revisit my crappy solution with something more like this.

Very useful. Keep them coming on Rails/jQuery theme now that 3.1 will ship with jQuery as the default.
Bharat

Thanks for another very useful episode.

A small refactoring tip: I think inside the jQuery function you can use $(this) to reference the object.

// application.js
$(function() {
  $("#book_author_tokens").tokenInput("/authors.json", {
    crossDomain: false,
    prePopulate: $(this).data("pre"),
    theme: "facebook"
  });
});

Thanks guys for mentioning alternative solutions. I'll have to check those out.

@miguelsan, thanks! Code is added now.

@Prem, we can't use $(this) here because it is still the scope of the dom ready function. We don't have a new function, just a hash of options.

Instead of changing Rails' JSON default (or mapping to the attributes as shown), you could also check out the jsonContainer option of the Tokeninput plugin.

Thank you really useful episode.

I just have a question, what if I don't have a finite number of choices? Let's say I want to use the jQuery Tokeninput on a field where users can enter tags, so the app should add the new tag if it is not already present in the list. Is it possible?

Sorry maybe my previous comment was not clear enough (I am not native english speaker).

Maybe it will be easier if I say I want to add an author that is not already present in the list, it doensn't looks like possible with this plugin, am I wrong?

Can someone please suggest an alternative to achieve this result?

Thanks

I swear, it seems like every time I'm in the middle of a new project, you release a screen cast on the same subject. Please keep up the great work!

@1239: Check out episode 167 for an example of doing something similar. Maybe you could combine all these ideas to get what you want.

I'm also interested in knowing the answer to @Gnago's question. Anyone?

To answer my (amnd @Gnagos') previous question: https://github.com/loopj/jquery-tokeninput/issues#issue/11

I am new to rails, and I love your casts. I've also tested this cast to my new project and it does not work from the text_field. If I use: http://lvh.me:3000/categories.json?q=ook

this url returns the category ok, but if i type "ook" to text field nothing is found. I also found that tokenize script transforms text to lowercase when using "like" SQL command.

i use:
$(function() {
  $("#product_category_tokens").tokenInput("/categories.json", {
    crossDomain: false,
    prePopulate: $("#product_category_tokens").data("pre"),
    theme: "facebook",
    minChars: 3,
    tokenLimit: 3
  });
});

Thanks for any help.

I got it!

I didn't have name column in model.

Excellent screencast Ryan. I love the beautiful interfaces of tokeninput and the clean implementation you have shown. Thank you for sharing this.. gem :)

I don't want to spam but this is a great related web site that lets you create new rails templates.

http://railswizard.org/

this plugin should definitely be added to the wizard

Unfortunately, you can't change the order of the chosen items, so it wouldn't actually be useful for an authors list in many cases.

Strange that you need to add the Crossdomain:false portion as that's the default for the script. Cool stuff either way Ryan.

Can't you use the association methods author_ids and author_ids= instead of making a custom author_tokens accessor?

Oops. I guess it's because you're getting a literal string from the params and not an array. Carry on! Nothing to see here!

Hey Ryan, love your work.

Couple of questions - firstly, I'd like to reiterate gnagno's question of somehow doing a find_or_create_by kind of thing, so that you can add new items at the same time.

Second question - how do you make this work for multiple fields on the same form - e.g. Books might have many authors, categories, publishers (bad examples - but you get the point).

Also - for tidying up the json output, isn't it as easy as adding:

@authors = Author.where("name like ?", "%#{params[:q]}%").select(['name', 'id'])

at the end?

Thanks.

Hey guys! I'm the author of jquery-tokeninput.

Just wanted to let you know about a few fixes I've implemented in the latest version:

• fixed the crossDomain issue mentioned in the railscast
• I liked the data-pre idea so much that I've made it a default feature of the plugin
• Better unicode support

See more in the changelog here:
https://github.com/loopj/jquery-tokeninput/blob/master/ChangeLog.md

Thanks for using the plugin!

Really helpful.
I highly recommend some kind of a request system for future episodes.
One feature I couldn't figure out is replacing the ugly javascript alert-box on the delete-action with something like modalbox or similar. Google wasn't much of a help here.
Anyway keep more episodes coming.
On a sidenote, why don't you use flattr?

If you haven't got an attribute called "name" add this to your to your model.

def as_json(options={})
    { :id => self.id, :name => self.full_name }
end

where full_name is the attribute you want to search.

and then in the controller add

format.json { render :json => @authors }

What happens to the current Authorship records when author_ids is reassigned? Are they destroy? Or are they just nullified?

My data in json is not being displayed in the order of [id, name] which I guess is required for the plugin to work. Can anyone tell me how to re-sort the json data or how to use the jsonContainer option for the plugin?

Thanks!

Is there another implementaion of the .where command for rails 2.3.4? I have everything else working but the function to limit the list to the typed in name is not working as rails 2.3.4 does not have the .where command...

Thanks!

could this work with nested forms?
where each element has an autocomplete box

I tried it but the ids are identical to the last existing obj passed through fields_for

this is very nice as ususal!! wish you have a sample Autocompletion like this but using prototype instead of jquery!

Alejandro, my capybara/selenium test gets stuck on the token input field with this message: Element is not currently visible and so may not be interacted with (Selenium::WebDriver::Error::ElementNotDisplayedError). Are you getting the same problem?

I wrote a post how to add authors with ajax on /books/new:
http://slawosz.github.com/2011/04/26/add-new-resource-with-ajax/

Thank you James!

I've been using your fantastic plug-in for about a year now. The pre-populate feature in particular is immensely helpful.

Kudos to Ryan for giving it the attention it deserves!

Ryan,

Nice job once again.

I was sad to see that you deleted John V from the design patterns book author list, and replaced him with Richard Helms.

John is no longer with us, and so the surviving Gang of Four is now the Gang of Three.

And you never added Ralph, then again as the token Smalltalk member of the GOF he never got as much respect anyway. <G>

@Rick: That's why I never like the "Gang of Four" moniker. To me, the book is "Gamma, Helms, Johnson and Vlissides". I was fortunate to have a useful email exchange with John before his death.

I've tried to use this technique to also add new items, if they don't exist yet. Ryan Bates came up with a great idea and I used it like this:
https://gist.github.com/952240

Great tutorial (as always) and great plugin.

Hi, I've been experimenting with the source for this railscast and am trying to produce XML for the view of the books with the authors listed. I've got it working for Books and Authors using the following ....

respond_with(@book = Book.find(params[:id]))

in the controllers (only showing the books one above). But cannot figure out how to get the associated authors in the xml.

I've looked through the docs at http://guides.rubyonrails.org/ but can't find an example of how I'd actually get the associated authors included in the respond_with call.

I'm sure its probably trivial, but this is all new to me at the moment.

Has anyone any pointers?

Thanks,
John

Used this technique to setup a simple playlist admin tool, but when I push it up to heroku the search isn't working consistently: some words are found and other sequence of letters aren't. Any pointers as to where to start?

Also, it works perfectly on the local server. But, isn't that always the case? :)

Seems that instead of using

format.json { render :json => @authors.map(&:attributes) }

we can set

self.include_root_in_json = false

in the needed model.

Thanks for the awesome explanation ryan. Are there other solutions out there that will let the user add a new entry if it doesn't exist in the token fields. Meaning, if the auto completion does not bring the entry, the user will be able to add it on the fly.

Hello Ryan :)

First of all, thanks a lot for all those great episodes... i've been watching them all for a long time now, and this is my first question.

Let's say i have a setup like that:

Item model, has a name field as required by the tokenizer jQuery plugin:
has_many :item_components
has_many :components,
:through => :item_components,
:source => :component,
:class_name => 'Item'

Item component model, also has a quantity field:
belongs_to :item,
:foreign_key => :item_id,
:class_name => 'Item'
belongs_to :component,
:foreign_key => :component_id,
:class_name => 'Item'

You can picture that models setup as a recipe self-referential tree. The tokenizer solution works great until i want to add the "quantity" into the view... The thing is that i'd like to be able to include it (and make it editable at the same time, but that's another issue). But this quantity field is on the ItemComponent model, not on the Item model... So how can my tokenizer can be aware of it?

Thanks a lot for your time, and keep up the good work!
Kind regards,
Pierre.

for some reason I had to had angle brackets around my prePopulate setting like so:

prePopulate: [$('#book_author_tokens').data('pre')]

not quite sure why, could be because my fields are single value.

In case it helps anyone...

To make it work in Rails 2.3, I had to include jQuery before jQuery-Token javascript apart from changing the version specific helpers...

Is it possible to use this with formtastic gem? Right now I'm using formtastic, for my forms (think that's why it gives me back error "wrong number of arguments (0 for 1)", when I add :authors_tokens field to my book form).

If you're injecting a form into the HTML after the DOM is loaded, this explains why it will not work and what you should do to fix it:

http://www.nickdizazzo.com/2011/07/jquery-replace-html-rails-3-tokeninput/

Vinicius Depizzol made it possible to create tokens on the fly.

https://github.com/vdepizzol/jquery-tokeninput

Just add allowCustomEntry: true in Application.js

$(function() {
  $("#book_author_tokens").tokenInput("/authors.json", {
    crossDomain: false,
    prePopulate: $("#book_author_tokens").data("pre"),
    theme: "facebook",
    allowCustomEntry: true
  });
});

How can change the default from "id" and "name" to something other than name (in my case its "account_number").

In the video he just says if you dont have "name", youll need further customization and i couldnt find anything anywhere.

Any help?

Just a note...

To use token input with simple_form, the user have to adapt the command, like this (in this case I did not use the attribute 'name' - for more details see the post above):

<%= f.input :author_tokens, :label => "Author", :input_html => {"data-pre" => @book.authors.collect{|author| {:id => author.id, :name => author.nome}}).to_json %>

I've recently switched from using this jQuery Token Input plugin in my Rails app, to the following jQuery plugin from Harvest:

http://harvesthq.github.com/chosen/

It's awesome. Check it out.

I ran into problems when trying to use more than one token input field on one page. Here is how I changed the code to make it work:

$(function () {
//$('#item_tag_tokens').tokenInput('/tags.json', {
$(".token_input").tokenInput('/tags.json', {
crossDomain: false,
//prePopulate: $('#postyle_tag_tokens').data('pre'),
prePopulate: $(this).data('pre'),
tokenValue: 'name',
theme: 'facebook'
});
});


and in the view:

<%= text_field_tag 'postyle_tag_tokens','', "data-pre" => postyle.tags.map(&:attributes).to_json, :class => "token_input" %>


Anybody have got this working with rails 3.1? I'm curious because it isn't working in my 3.1 project, it was okay in 3.0.* . The problem is that when I want to type in something in this input area I've got "Searching..." message and no results listed at all, only when text doesn't match database entries I've got "no results" message. I've tried to add some pre data into the database manually, unfortunately in the result i have pre-populated input with "undefinded x" instead of name I wrote to join table. Maybe somebody had similar problem?

If I have a production site in a separate folder (www.somesite.com/appFolder/), then I'm not able to get the tokenInput to work correctly. Instead of:

tokenInput("/tags.json", ...

I need to say something like:

tokenInput("/appFolder/tags.json", ...

Is there a DRY way to do this so I do not have to manually edit the code on the production site every time? Thanks.

Anyone experienced prePopulate tags not showing up on Heroku? I can't explain why most of my tags do, but the one with id#1 doesn't

If the form doesn't pass validation, the tokens are lost and have to be entered again. What would be a clean way to have it keep the tokens on validation errors.

I don't like the way I'm doing it now:

def create
  @book = Book.new(params[:book])
  params[:author_tokens].split(',').each do |author|
    @book.authors << Author.find(author)
  end
  ...
end

It works but somehow mine seems slower than Ryan's. Am I missing something or did he do some creative video editing? ;)

How can we make a validation about the token field? Just, I want to validate presence of this field. Any idea?

Regards

Has anyone been able to get Tokeninput working with nested forms? I'm using a standard fields_for, but I can't get the form to pass the attributes of the nested model. Any thoughts would be appreciated.

Thanks!

If you have a huge amount of checkboxes you can just set a fixed height to the container of that checkboxes and set an overflow-y to scroll.

Has anyone used, this in nested form?
I am trying to use this using semantic_form_for , with a single has_many and belongs_to association

is there any way to use this inside a form of active admin?

thanks!! :)

Ryan,

Thanks for this very cool railscast.

If you re-do this railscast, you could re-do it with coffeescript, but also - it would be great if you could show how to implement this with multiple fields in a form using it. Or perhaps there is a better way than using token-input now?

To add to the token-input complexity - you could require three different propertyToSearch items. For example one could use the default "name", but the other two should require something different. In the project I'm working on, I'm trying to use this to populate a work order form, which can have "streets", "buildings", and "units" added to them. Streets have names, but buildings and units have numbers and unit_codes to designate them.

I have seen others modify the javascript to handle multiple fields, where all the options were the same - but I haven't been able to find a solution for what I'm trying to do. I suspect I may be able to declare separate token-input DOM objects... but I"m not sure how to do that yet.

When I tried to just duplicate the javascript for each of my fields - I suspect they stepped all over each other.

has anyone gotten this to work with multiple fields that each need to pull on their own .json?

I have three fields that I'm trying to use this with: streets, buildings, and units.

I keep pushing this farther. I have the multiple token fields on one page working now.

Now I'm trying to come up with a way to set additional data. For example, when I set a unit token, I also want to set a boolean true. And when I remove the unit - I want to set that boolean to false.

I see there are some callbacks that can be used - but I'm uncertain how I can impact my database from there.

Anyone do this sort of thing?

I'm using acts-as-taggable-on and was wondering how I might go about creating a new tag if one wasn't found already. I've tried several things and I keep getting an error where its searching for a tag with an id of 0 whenever it doesn't know about the tag already

Any one have this working with multiple models? I am trying to create audiences like on facebook, could be users, or groups, or etc.

I have tried polymorphic assoc. and have been banging my head against this for a week.

I am using ruby 1.9.3p194 and rails 3.2.5
when i do @authors = Author.all It works fine by outputing all name from my database.
But @authors = Author.where("name like ?", "%#{params[:q]}%")
is not working. I am using Mongodb.
What could be the solution?

@Er.Love the syntax is:
Model.where(name: /#{params[:q]}/)
I hope you found it since then ;)

I'm having an issue. the selected tokens are not sent when I validate my form. I all the other fields are send except those ones!
I'm running rails 3.2.9 with mongodb

its not working with jquery.steps.min