我正在转换标准脚手架生成的应用程序,以类似于http://stjhimy.com/posts/07-creating-a-100-ajax-crud-using-rails-3-and-unobtrusive-javascript中指定的方式使用AJAX和JQuery.
我按照所有说明操作:
>使用2个部分创建复合索引视图;
>更新了控制器,仅保留索引,创建,编辑,更新和销毁操作;
>为使用JQuery函数更新DOM的创建,更新和销毁操作创建了js.erb文件.
似乎无法访问js.erb文件.将js.erb放在视图文件中,例如app / views / customers / create.js.erb
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| %>
表格的代码如下:
index.html.erb文件
_form.html,erb部分文件
<%= form_for(@customer,:remote => true) do |f| %>
_customers.html.erb部分的文件是:
编辑
最新版本的客户控制器:
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
在将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 %>
最新日志:
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
最佳答案
创建表单和link_to对象时,需要确保它们具有:remote =>如果它们为true,则路由不会通过JS呈现操作.相反,它将使用默认HTML呈现它.
一个例子:
<%= form_for(@post,:remote => true) do |f| %>
要么
<%= link_to "Edit",edit_post_path(post),:remote => true %>
另外,请确保安装了最新的jQuery和jQuery Rails适配器:https://github.com/rails/jquery-ujs
作为旁注,如果您为CRUD操作执行100%ajax,则不需要在上面的代码中使用format.html,因为您将要渲染的所有内容都是JS文件(format.js).
更新:
我认为你误解了一些事情……你正在阅读的教程只谈到将CRUD(创建,读取,更新,删除)操作改为100%ajax调用,这意味着他们是唯一会回复渲染的人. js.erb文件.因此,当您检查页面是Processing SomeController#some_action为JS时,它将仅适用于您的Customers控制器中的创建,显示,更新和销毁操作.
对于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. Choose to overwrite jquery_ujs.js if prompted.
然后运行rails generate jquery:install
将布局模板更改为:
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= csrf_Meta_tag %>
我不得不说,你正在阅读的教程是关于我读过的最糟糕的教程.因为你似乎对Ruby on Rails很新,所以我强烈建议你阅读一个不同的教程(如果你还想阅读关于AJAX的R / Rails:http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/,或者甚至是非常好的东西,这样可以更好地学习Rails本身) :http://ruby.railstutorial.org/ruby-on-rails-tutorial-book).
猜你在找的jQuery相关文章