Xử lý tệp js.erb trong Rails 3

Question

Tôi đang chuyển đổi một ứng dụng tạo giàn giáo chuẩn để sử dụng AJAX và JQuery theo cách tương tự như được chỉ định trong http://stjhimy.com/posts/07-creating-a-100-ajax-crud-using-rails-3-and-unobtrusive-javascript.

tôi theo tất cả các hướng dẫn:

• Tạo một cái nhìn Index hợp sử dụng 2 partials;
• Cập nhật Trình điều khiển, chỉ giữ lại các hành động Chỉ mục, Tạo, Chỉnh sửa, Cập nhật và Tiêu diệt;
• đã tạo các tệp js.erb cho Tạo, chỉnh sửa, cập nhật và hủy các hành động sử dụng các hàm JQuery để cập nhật DOM.

Dường như không thể truy cập vào tệp js.erb. Đặt js.erb trong với các tập tin xem, ví dụ app/views/customers/create.js.erb

Mã cho create.js.erb là:

<% if @customer.errors.any? -%> 

    /*Hide the Flash Notice div*/ 
    $("#flash_notice").hide(300); 

    /*Update the html of the div customer_errors with the new one*/ 
    $("#customer_errors").html("<% @customer.errors.full_message.each do |msg| %> 
           <li><%= msg %></li> 
           <% end %>"); 

    /*Show the div customer_errors*/ 
    $("#cust0mer_errors").show(300); 

<% else -%> 

    /*Hide the div customer_errors*/ 
    $("#customer_errors").hide(300); 

    /*Update the html of the div flash_notice with the new one */ 
    $("#flash_notice").html("<%= flash[:notice] %>"); 

    /*Show the flash_notice div*/ 
    $("#flash_notice").show(300); 

    /*Clear the entire form*/ 
    $(":input:not(input[type=submit])").val(""); 

    /*Replace the html of the div posts_list with the updated new one*/ 
    $("#customers_list").html("<%= render "customers" %>"; 

    <% end %> 

Mã cho hình thức là dưới đây:

Các tập tin index.html.erb

<div id="customer_form"><%= render 'form' %></div> 
<div id="customers_list"><%= render 'customers' %></div> 

Các _form.html, eRB tập tin phần

<%= form_for(@customer, :remote => true) do |f| %> 


    <div id="customer_errors" style="display:none"></div> 

    <div class="field"> 
    <%= f.label :firstname %> 
    <%= f.text_field :firstname %> 
    <%= f.label :lastname %> 
    <%= f.text_field :lastname %> 
    </div> 
    <div class="field"> 
    <%= f.label :email %> 
    <%= f.text_field :email %> 
    <%= f.label :phone %> 
    <%= f.text_field :phone %> 
    </div> 
    <div class="field"> 
    <%= f.label :password %> 
    <%= f.text_field :password %> 
    <%= f.label :address_id %> 
    <%= f.text_field :address_id %> 
    </div> 
    <div class="actions"> 
    <%= f.submit %> 
    </div> 
<% end %> 

Các tập tin cho _customers.html.erb phần là:

<table> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    <th>Email</th> 
    <th>Phone</th> 
    <th>Password</th> 
    <th>Address</th> 
    <th></th> 
    <th></th> 
    <th></th> 
    </tr> 

<% @customers.each do |customer| %> 
    <tr> 
    <td><%= customer.firstname %></td> 
    <td><%= customer.lastname %></td> 
    <td><%= customer.email %></td> 
    <td><%= customer.phone %></td> 
    <td><%= customer.password %></td> 
    <td><%= customer.address_id %></td> 
    <td><%= link_to 'Edit', edit_customer_path(customer), :remote => true %></td> 
    <td><%= link_to 'Destroy', customer, :remote => true, :confirm => 'Are you sure?', :method => :delete %></td> 
    </tr> 
<% end %> 
</table> 

---

Sửa

phiên bản mới nhất của khách hàng điều khiển:

class CustomersController < ApplicationController 

    before_filter :load 

    def load 
    @customers = Customer.all 
    @customer = Customer.new 
    end 

    def index 
    end 


    def create 
    @customer = Customer.new(params[:customer]) 
    if @customer.save 
     flash[:notice] = "Customer was successfully created." 
     @customers = Customer.all 
     respond_to do |format| 
     format.js 
     end 

    end 
    end 

    def edit 
    @customer = Customer.find(params[:id]) 
    respond_to do |format| 
     format.js 
    end 
    end 

    def update 
    @customer = Customer.find(params[:id]) 
    if @customer.update_attributes(params[:customer]) 
     flash[:notice] = "Customer was successfully updated." 
     @customers = Customer.all 
     respond_to do |format| 
     format.js 
     end 
    end 
    end 

    def destroy 
    @customer = Customer.find(params[:id]) 
    @customer.destroy 
    flash[:notice] = "Customer successfully destroyed" 
    @customers = Customer.all 
    respond_to do |format| 
     format.js 
    end 
    end 
end 

Phiên bản mới nhất của mẫu bố cục đã bao gồm các thẻ như sau sau khi tôi chanse tệp tin Jquery.js thành rai ls.js

<%= stylesheet_link_tag :all %> 
     <%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' %> 
     <%= javascript_include_tag 'rails' %> 
     <%= csrf_meta_tag %> 

bản ghi mới nhất:

Started GET "/customers" for 127.0.0.1 at Wed Dec 14 21:16:14 +0000 2011 
    Processing by CustomersController#index as HTML 
    Customer Load (1.3ms) SELECT "customers".* FROM "customers" 
Rendered customers/_form.html.erb (14.1ms) 
Rendered customers/_customers.html.erb (28.1ms) 
Rendered customers/index.html.erb within layouts/application (47.6ms) 
Completed 200 OK in 74ms (Views: 56.3ms | ActiveRecord: 1.3ms) 


Started GET "/customers/13/edit" for 127.0.0.1 at Wed Dec 14 21:17:20 +0000 2011 
    Processing by CustomersController#edit as JS 
    Parameters: {"id"=>"13"} 
    Customer Load (1.1ms) SELECT "customers".* FROM "customers" 
    Customer Load (0.5ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 13 LIMIT 1 
Rendered customers/_form.html.erb (16.1ms) 
Rendered customers/edit.js.erb (17.6ms) 
Completed 200 OK in 43ms (Views: 27.6ms | ActiveRecord: 1.5ms) 


Started GET "/customers/13/edit" for 127.0.0.1 at Wed Dec 14 21:17:31 +0000 2011 
    Processing by CustomersController#edit as JS 
    Parameters: {"id"=>"13"} 
    Customer Load (1.0ms) SELECT "customers".* FROM "customers" 
    Customer Load (0.3ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 13 LIMIT 1 
Rendered customers/_form.html.erb (25.9ms) 
Rendered customers/edit.js.erb (28.8ms) 
Completed 200 OK in 52ms (Views: 39.0ms | ActiveRecord: 1.3ms) 


Started DELETE "/customers/18" for 127.0.0.1 at Wed Dec 14 21:18:31 +0000 2011 
    Processing by CustomersController#destroy as JS 
    Parameters: {"id"=>"18"} 
    Customer Load (1.0ms) SELECT "customers".* FROM "customers" 
    Customer Load (0.4ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 18 LIMIT 1 
    AREL (0.4ms) DELETE FROM "customers" WHERE "customers"."id" = 18 
    Customer Load (0.7ms) SELECT "customers".* FROM "customers" 
Rendered customers/_customers.html.erb (120.3ms) 
Rendered customers/destroy.js.erb (122.1ms) 
Completed 200 OK in 198ms (Views: 134.1ms | ActiveRecord: 2.5ms) 


Started GET "/customers" for 127.0.0.1 at Wed Dec 14 21:20:00 +0000 2011 
    Processing by CustomersController#index as HTML 
    Customer Load (1.6ms) SELECT "customers".* FROM "customers" 
Rendered customers/_form.html.erb (19.1ms) 
Rendered customers/_customers.html.erb (23.8ms) 
Rendered customers/index.html.erb within layouts/application (50.6ms) 
Completed 200 OK in 76ms (Views: 54.9ms | ActiveRecord: 1.6m 

Answer 1

Khi bạn tạo form và link_to của bạn đối tượng, bạn cần phải chắc chắn rằng họ có một :remote => true vào chúng nếu không thì con đường sẽ không làm cho hành động qua JS . Thay vào đó, nó sẽ hiển thị nó với HTML mặc định.

Một ví dụ:

<%= form_for(@post, :remote => true) do |f| %> 

hoặc

<%= link_to "Edit", edit_post_path(post), :remote => true %> 

Ngoài ra, hãy chắc chắn rằng bạn có adapter jQuery và jQuery Rails mới nhất được cài đặt: https://github.com/rails/jquery-ujs

Là một mặt lưu ý, bạn don' t cần format.html trong mã của bạn ở trên nếu bạn đang thực hiện 100% ajax cho các hành động CRUD vì tất cả những gì bạn sẽ làm là các tệp JS (format.js).

---

Cập nhật: Tôi nghĩ rằng bạn đang hiểu nhầm một vài điều ... Các hướng dẫn bạn đọc chỉ các cuộc đàm phán về việc thay đổi CRUD (tạo, đọc, cập nhật, xóa) hành động thành 100% các cuộc gọi ajax mà có nghĩa là họ là những người duy nhất sẽ phản hồi bằng cách hiển thị các tệp .js.erb. Vì vậy, khi bạn kiểm tra xem trang có phải là Processing SomeController#some_action as JS, nó sẽ chỉ chỉ áp dụng cho các hành động create, show, update và destroy trong bộ điều khiển Khách hàng của bạn.

Đối với jQuery và jQuery-UJS cài đặt on Rails 3.0, làm theo các hướng:

Hãy chắc chắn để thoát khỏi các rails.js nộp nếu nó tồn tại, và thay vào đó sử dụng jquery_ujs mới. tệp js được sao chép vào thư mục công khai. Chọn ghi đè lên jquery_ujs.js nếu được nhắc.

Sau đó chạy rails generate jquery:install

Thay đổi mẫu bố trí của bạn như thế này:

<%= stylesheet_link_tag :all %> 
<%= javascript_include_tag :defaults %> 
<%= csrf_meta_tag %> 

Tôi có thể nói, đó hướng dẫn bạn đang đọc là về hướng dẫn tồi tệ nhất mà tôi từng đọc. Vì bạn dường như rất mới với Ruby on Rails nên tôi muốn cao khuyên bạn nên đọc một hướng dẫn khác (như thế này nếu bạn vẫn muốn đọc về AJAX w/Rails: http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/ hoặc thậm chí một cái gì đó thực sự tốt như thế này để học Rails chính nó tốt hơn: http://ruby.railstutorial.org/ruby-on-rails-tutorial-book).