2012-10-04 22 views
6

Estoy intentando que los campos de token funcionen en mi aplicación.Ruby on Rails: Token Fields - Railscast

He seguido exactamente este video: http://railscasts.com/episodes/258-token-fields

modelo de proyecto

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

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 

diseños/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> 

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

En mi nueva página ya, tengo un cuadro de texto planificador de evento jQuery eso funciona. No entiendo por qué el campo de token en la misma página no funciona.

He seguido exactamente el video unas 3 veces para asegurarme, y todavía no funciona. Las únicas diferencias son que puse mis javascripts y hojas de estilo en la carpeta de activos, donde en el video va en la carpeta pública. ¿Alguien puede ayudar? Gracias.

+0

¿Has probado tus datos JSON? También necesita tener el JS dentro de un documento listo para que se ejecute en la carga de la página. –

+2

Navegué a localhost: 3000/technols.json y se visualizaron los datos, y en esa nueva página, ya he logrado obtener javascript trabajando en él –

+0

¿Cuál es el problema, entonces? –

Respuesta

0

No es un error probable. Intente lo siguiente:

  1. Compruebe su archivo application.js. ¿Ha incluido el archivo jquery.tokeninput.js?
  2. Asegúrese de que se requiere un archivo js el token de entrada después de jQuery en application.js
  3. Compruebe para asegurarse de que los archivos CSS se incluyen
  4. En el navegador, estás recibiendo cualquier error de js en la consola? Si es así, por favor ammend pregunta.

Editar

Además, me acabo de dar cuenta, en su new.html.erb usted tiene un div html después de la etiqueta de cierre!

</BODY> 
</HTML> 

Por favor, quítelos/colóquelos en el lugar correcto.