jquery token-input and active_admin

Question

I want to use jquery-token-input with has_many relationship inside active_admin.

What is the best way to do it, and how can i implement it generically so that i can re-use the code for further has_many relationships.

I will be looking forward for your suggestion and guide lines.

Answer 1

Well, this doesn't use jquery-token-input, but it works!

I used Chosen.

Download the CSS, JS and png files and put into the appropriate assets directory.

In /app/admin/modelname.rb

ActiveAdmin.register Modlename do

#Customize create and edit form
form do |f|
    f.inputs do
       f.input :name
       f.input :othermodel, :input_html => { :class => "chosen-input" }
    end
  f.buttons
  end   
end  

In active_admin.js

//= require chosen.jquery.min

$(document).ready(function(){
   $(".chosen-input").chosen();
});

In active_admin.css.scss

/*
   *= require chosen
*/

Answer 2

There's a RailsCast on this that I was able to adapt in order to do this. http://railscasts.com/episodes/258-token-fields

The only additional things to think about are making sure that the javascript and css are included in ActiveAdmin.

For the form in ActiveAdmin, here's what I used (in the file app/admin/story.rb)

ActiveAdmin.register Story do
  form do |f|
    f.inputs "Story details" do
        f.input :title
    end
    f.inputs "Issue Categories" do
        f.text_field :issue_tokens, data: {load: f.object.issues}
    end

    f.actions
  end
end

In this case, my models are Story and Issues, connected by a has and belongs to many relationship.

The only gotcha is that the token input seems to be getting overridden by active admin, trying to figure that one out.

Update Add the following to app/assets/stylesheets/active_admin.css.sass

@import "token-input";
@import "token-input-facebook";

This gets some of the needed styling going, but some work is still needed, I think due to clashes with active admin styling.