Jquery tokenInput not prePopulating

Question

Hi I'm following this tutorial but prepopulating the field is not working while editing my model..

Note that text_field category_tokens is not pre-populated with categories while editing.

Here are code snippets, the HTML output of the text_field shows the values.

  <input id="product_category_tokens" type="text" size="30" name="product[category_tokens]" data-pre="[{"created_at":"2010-09-13T03:33:17Z","description":"","id":x,"name":"Kitchen & Dining ","parent_id":xx,"permalink":"kitchen-dining","updated_at":"2011-01-05T11:17:10Z"}]" style="display: none;">

  application.js
    $(function() {
      $("#product_category_tokens").tokenInput("/categories.json", {
          crossDomain: false,
          prePopulate: $('#product_category_tokens').data('pre'),
          preventDuplicates: true
      });
    });

    <%= f.text_field :category_tokens, "data-pre" => @product.categories.map(&:attributes).to_json %>

Answer 1

This is a duplicate of: Jquery tokenInput not prepopulating the text_field

And the answer is right there at the end:

<%= f.text_field :category_tokens, input_html => { "data-pre" => @product.categories.map(&:attributes).to_json } %>

I'm not taking credit for this (it's not my answer) just thought I'd point this out in case it helps someone else because I was caught by it too.

I also want to point out that on Shawn's comment, you can get around that by adding this to your js.coffee file:

propertyToSearch: "author"

Change author to whatever your column name is and this will work. :name is simply the default but you can override it in this method. More documentation on the jquery tokeninput page: http://loopj.com/jquery-tokeninput/