2012-10-04 2 views
6

Sto cercando di ottenere i campi token per funzionare sulla mia app.Ruby on Rails: Token Fields - railscast

Ho seguito questo video esattamente: http://railscasts.com/episodes/258-token-fields

modello progetto

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 regolatore:

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 

layout/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> 

progetto/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"}); 
}); 

Sulla mia nuova pagina già, ho una casella di testo datepicker jquery che funzioni. Non capisco perché il campo token sulla stessa pagina non funzioni.

Ho seguito il video esattamente circa 3 volte per essere sicuro, e ancora non funziona. Le uniche differenze sono che ho inserito i miei javascript e fogli di stile nella cartella delle risorse, dove nel video viene inserito nella cartella pubblica. Qualcuno può aiutare? Grazie.

+0

Hai testato i tuoi dati JSON? Inoltre è necessario avere il JS all'interno di un documento pronto in modo che venga eseguito al caricamento della pagina. –

+2

Ho navigato a localhost: 3000/technols.json e sono stati visualizzati i dati, e su quella nuova pagina, sono già riuscito a ottenere javascript su di esso –

+0

Qual è il problema allora? –

risposta

0

Non è un errore probabile. Provare quanto segue:

  1. Controllare il file application.js. Hai incluso il file jquery.tokeninput.js?
  2. Assicurarsi che il file token di ingresso JS è richiesto dopo jquery in application.js
  3. Controllare per assicurarsi che i file CSS sono compresi
  4. Nel browser, stai ricevendo eventuali errori JS nella console? Se è così, per favore, ammetti la domanda.

Modifica

Inoltre, ho appena notato, nella vostra new.html.erb si dispone di un div dopo l'html tag di chiusura!

</BODY> 
</HTML> 

Rimuovere/posizionare questi nella posizione corretta.