[英]Handling js.erb files in Rails 3
I am converting a standard scaffold generated application to use AJAX and JQuery in a similar manner to that specified in http://stjhimy.com/posts/07-creating-a-100-ajax-crud-using-rails-3-and-unobtrusive-javascript . 我正在转换一个标准的脚手架生成的应用程序,以类似于http://stjhimy.com/posts/07-creating-a-100-ajax-crud-using-rails-3-中指定的方式使用AJAX和JQuery。 -unobtrusive-javascript 。
I followed all the instructions : 我按照所有说明操作:
Can't seem to access the js.erb files at all. 似乎无法访问js.erb文件。 Put the js.erb in the with the view files , for example app/views/customers/create.js.erb
将js.erb放在视图文件中,例如app/views/customers/create.js.erb
The code for the create.js.erb is : create.js.erb的代码是:
<% 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 %>
The code for the forms is below: 表格的代码如下:
The index.html.erb file index.html.erb文件
<div id="customer_form"><%= render 'form' %></div>
<div id="customers_list"><%= render 'customers' %></div>
The _form.html,erb partial file _form.html,erb部分文件
<%= 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 %>
The file for the _customers.html.erb partial is: _customers.html.erb部分的文件是:
<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>
Edit 编辑
latest version of Customers controller: 最新版本的客户控制器:
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
The latest version of layout template has include tags as follows after I chanse the Jquery.js fille to rails.js 在将Jquery.js文件传递给rails.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 %>
Latest logs: 最新日志:
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
When you create your form
and link_to
objects, you need to make sure they have a :remote => true
on them otherwise the route will not render the action via JS. 当您创建form
和link_to
对象时,您需要确保它们具有:remote => true
,否则路由将不会通过JS呈现操作。 Instead, it will render it with the default HTML. 相反,它将使用默认HTML呈现它。
An example: 一个例子:
<%= form_for(@post, :remote => true) do |f| %>
or 要么
<%= link_to "Edit", edit_post_path(post), :remote => true %>
Also, make sure you have the latest jQuery and jQuery Rails adapter installed: https://github.com/rails/jquery-ujs 此外,请确保安装了最新的jQuery和jQuery Rails适配器: https : //github.com/rails/jquery-ujs
As a side note, you don't need format.html
in your code above if you're doing 100% ajax for the CRUD actions since all you'll ever render are the JS files (format.js). 作为一个侧面说明,你不需要format.html
如果你正在做100%的AJAX的CRUD操作,因为你永远呈现所有都是JS文件(format.js)上面的代码。
Update: I think you are misunderstanding a few things... The tutorial you are reading only talks about changing the CRUD (create, read, update, delete) actions into 100% ajax calls which means they are the only ones that will respond with rendering .js.erb
files. 更新:我认为你误解了一些事情......你正在阅读的教程只谈到将CRUD(创建,读取,更新,删除)操作改为100%ajax调用,这意味着他们是唯一会回复的渲染.js.erb
文件。 So when you are checking that the page is Processing SomeController#some_action as JS
it will only apply to the create
, show
, update
, and destroy
actions within your Customers controller. 因此,当您检查页面是Processing SomeController#some_action as JS
,它将仅适用于您的Customers控制器中的create
, show
, update
和destroy
操作。
For the jQuery and jQuery-UJS install on Rails 3.0 , follow these directions: 对于Rails 3.0上的jQuery和jQuery-UJS安装 ,请按照以下说明操作:
Be sure to get rid of the rails.js file if it exists, and instead use the new jquery_ujs.js file that gets copied to the public directory. 一定要删除rails.js文件(如果存在),而是使用新的jquery_ujs.js文件复制到公共目录。 Choose to overwrite jquery_ujs.js if prompted. 如果出现提示,请选择覆盖jquery_ujs.js。
Then run rails generate jquery:install
然后运行rails generate jquery:install
Change your layout template to this: 将布局模板更改为:
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
I have to say, that tutorial you are reading is about the worst tutorial I've ever read. 我不得不说,你正在阅读的教程是关于我读过的最糟糕的教程。 Since you seem to be very new to Ruby on Rails so I would highly recommend reading a different tutorial (like this one if you still want to read about AJAX w/ Rails: http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/ or even something really good like this one to learn Rails itself better: http://ruby.railstutorial.org/ruby-on-rails-tutorial-book ). 因为你似乎对Ruby on Rails很新,所以我强烈建议你阅读一本不同的教程(如果你还想阅读有关AJAX的AVAX,请阅读这篇教程: http : //net.tutsplus.com/tutorials/javascript- ajax / using-unobtrusive-javascript-and-ajax-with-rails-3 /甚至还有一些非常好的东西可以更好地学习Rails本身: http : //ruby.railstutorial.org/ruby-on-rails-tutorial-书 )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.