How to implement a dual list box control in rails 4

Question

I want to implement a dual list box in a form using rails 4 that gets the column names from another table

I have googled for some examples and so far i have tried the example below but with no success. I just need a simple way to implement a dual list box that gets the column name it doesn't have to be this although this is looks pretty http://geodan.github.io/duallistbox/sample-100.html.

Here is application.js

//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require bootstrap
//= require turbolinks
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap3
//= require_tree .

i have downloaded dual-list-box.js to my assets/javacrtipt from https://github.com/Geodan/DualListBox/

Here is my data_set.coffe

ready = ->
  $('dualListBox').DualListBox();
  return

$(document).ready ready

Here is my _form.html.erb

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

      <ul>
      <% @data_set.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name ,class:'form-control' %>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
        Select Features
    </div>
    <div class="panel-body">
       <select id="dualListBox">
    </div>
  </div>

  <div class="actions">
    <%= f.submit :class =>"btn btn-default"  %>
  </div>
<% end %>

My gem file

source 'https://rubygems.org'
gem 'rails', '4.2.5.1'
gem 'pg'
gem 'rails_12factor', group: :production

gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'

gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0',          group: :doc
gem 'tzinfo-data', platforms: [:mingw, :mswin]
gem 'rails_refactor'

gem 'bcrypt', platforms: :ruby
gem 'bootstrap-sass'
gem 'sprockets-rails', '2.3.3'
gem 'devise'
gem 'jquery-datatables-rails', '~> 1.12.2'

EDIT:

my final result was this:

I am having problems with compatibility between bootstrap sprockets and jquery, so fonts are not loading,i have decided for now to stop working on this component.

Answer 1

$(document).ready ->
  ready()

ready = ->
  $('#dualListBox').DualListBox()

You have an element with id "dualListBox" so you need to use '#' in the jQuery selector.