Home/ Questions/Q 8849911
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T12:46:34+00:00

I am trying to get token fields to work on my app. I have

  • 0

I am trying to get token fields to work on my app.

I have followed this video exactly: http://railscasts.com/episodes/258-token-fields

project model

class Project < ActiveRecord::Base
  attr_accessible  :edited_first_name, :edited_last_name, :first_name, :last_name, :business_div, :client, :customer_benifits, :edited_date, :end_date, :entry_date,  :financials, :industry, :keywords, :lessons_learned, :project_name, :project_owner, :role, :start_date, :status, :summary, :tech , :technols, :technol_tokens


has_many :projecttechnols
has_many :technols, :through => :projecttechnols

attr_reader :technol_tokens

  def technol_tokens=(ids)
    self.technol_ids = ids.split(",")
  end


accepts_nested_attributes_for(:technols)

technols controller:

def index
    @technols = Technol.where("tech like ?", "%#{params[:q]}%")

    respond_to do |format|
      format.html # index.html.erb
    format.json { render :json => @technols.map(&:attributes) }
    end
  end

layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>

<div id="user_nav">
  <% if user_signed_in? %>
    Hi <%= current_user.firstname %>, Signed in as  <%= current_user.email %>.  Not you?

<%= link_to "Sign out", destroy_user_session_path, :method => :delete %>
  <% else %>
    <%= link_to "Sign up", new_user_registration_path %> or
    <%= link_to "Sign in", new_user_session_path %>
  <% end %>
</div>
<% if current_user.try(:admin?) %>
 <div class="admin_button">
<%= button_to "ADMIN", users_path, :class => "button", :method => "get" %>

</div>




<% end %>
  <title>ExceptionApp</title>



<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
  <![endif]-->
  <%= stylesheet_link_tag    "application", "token-input-facebook" %>
  <%= csrf_meta_tags %>
<link href="application.css" rel="stylesheet" />



<meta name="viewport" content="width=device-width; initial-scale=1.0">


<link rel="SHORTCUT ICON"
       href="/assets/minilogo.png">



<%= link_to(image_tag("/assets/logo.png"), projects_path, :class => "logow") %>

</head>
<body>

<%= yield %>


<style>
.debug {


position:absolute; right:0px; bottom:0px;

}
</style>
<div class ="debug">
<%= debug(params) %>
<div>


<%= content_tag(:div, flash[:error], :id => "flash_error") if flash[:error] %>
<%= content_tag(:div, flash[:alert], :id => "flash_alert") if flash[:alert] %>
<!-- Javascripts
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <%= javascript_include_tag :defaults, "application", "jquery.tokeninput" %>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


</body>
</html>

project/new.html.erb

<%= stylesheet_link_tag "new" %>


<h1>Create New Project</h1>

<%= stylesheet_link_tag "form" %>


<%= form_for(@project) do |f| %>



<p>
    <%= f.label :technol_tokens, "technol" %><br />
    <%= f.text_field :technol_tokens, "data-pre" => @project.technols.map(&:attributes).to_json %>
  </p>



</BODY>
</HTML>


<div class="create_button">
<div class="actions">
    <%= f.submit "Save New Project", :class => "button",  :confirm => "Are you sure you want to save the new project?" %>
  </div>
</div>




</div> <%#= small div %>





<% end %>



<div class="back_button2">
<%= button_to "Back", projects_path , :class => "button", :method => "get" %>
</div>

application.js EDIT:

$(function() {
  $("#project_technol_tokens").tokenInput("/technols.json", {
    crossDomain: false,
    prePopulate: $("#project_technol_tokens").data("pre"),
    theme: "facebook"
  });
});



$(function() {
  $("#project_start_date").datepicker({dateFormat: 'dd-mm-yy'});
});

$(function() {
  $("#project_end_date").datepicker({dateFormat: 'dd-mm-yy'});
});



jQuery(function(){

jQuery('#start_date_A').datepicker({dateFormat: "dd-mm-yy"});
});

jQuery(function(){

jQuery('#start_date_B').datepicker({dateFormat: "dd-mm-yy"});
});

On my new page already, I have a jquery datepicker text box that works. I don’t understand why the token field on the same page doesn’t work.

I have followed the video exactly about 3 times to make sure, and it still doesn’t work. Only differences are that I put my javascripts and stylesheets in the assets folder, where in the video it goes in the public folder. Can anyone help? Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not a likely error. Please try the following:

    1. Check your application.js file. Have you included the jquery.tokeninput.js file?
    2. Make sure that the token-input js file is required after jquery in application.js
    3. Check to make sure the CSS files are included
    4. In the browser, are you getting any js errors in the console? If so please ammend question.

    Edit

    Also, I just noticed, in your new.html.erb you have a div after the html closing tag!

    </BODY>
</HTML>

    Please remove / place these in the proper place.

    • 0