2012-10-04 30 views
6

Tôi đang cố gắng nhận các trường mã thông báo để hoạt động trên ứng dụng của mình.Ruby on Rails: Token Fields - railscast

Tôi đã theo video này chính xác: http://railscasts.com/episodes/258-token-fields

mô hình dự án

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 điều khiển:

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> 

dự án/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"}); 
}); 

Trên trang mới của tôi đã có, tôi có một jquery datepicker hộp văn bản hoạt động. Tôi không hiểu tại sao trường mã thông báo trên cùng một trang không hoạt động.

Tôi đã theo dõi video chính xác khoảng 3 lần để đảm bảo và video vẫn không hoạt động. Chỉ có sự khác biệt là tôi đặt javascripts và bảng định kiểu trong thư mục nội dung, trong đó trong video nó nằm trong thư mục công cộng. Có ai giúp được không? Cảm ơn.

+0

Bạn đã kiểm tra dữ liệu JSON của mình chưa? Ngoài ra, bạn cần phải có JS bên trong một tài liệu sẵn sàng để nó được thực hiện trên tải trang .. –

+2

Tôi đã điều hướng đến localhost: 3000/technols.json và dữ liệu được hiển thị, và trên trang mới đó, tôi đã quản lý để có được javascript làm việc trên nó –

+0

Vậy thì vấn đề là gì? –

Trả lời

0

Không phải là lỗi có thể xảy ra. Vui lòng thử các cách sau:

  1. Kiểm tra tệp ứng dụng.js của bạn. Bạn đã bao gồm tệp jquery.tokeninput.js chưa?
  2. Hãy chắc chắn rằng tập tin token-input js là cần thiết sau khi jquery trong application.js
  3. Kiểm tra để đảm bảo các file CSS có
  4. Trong trình duyệt, bạn có nhận được bất kỳ lỗi js trong giao diện điều khiển? Nếu có, vui lòng thêm câu hỏi.

Sửa

Ngoài ra, tôi chỉ nhận thấy, trong new.html.erb của bạn, bạn có một div sau html thẻ đóng!

</BODY> 
</HTML> 

Vui lòng xóa/đặt các địa điểm này vào đúng vị trí.