admin管理员组文章数量:1327690
I am converting a standard scaffold generated application to use AJAX and JQuery in a similar manner to that specified in .
I followed all the instructions :
- Creating a posite Index view using 2 partials;
- Updated the Controller,only retaining Index, Create, Edit,Update and Destroy actions;
- created js.erb files for the Create, edit, update and destroy actions that use JQuery functions to update the DOM.
Can't seem to access the js.erb files at all. Put the js.erb in the with the view files , for example app/views/customers/create.js.erb
The code for the create.js.erb is :
<% 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
<div id="customer_form"><%= render 'form' %></div>
<div id="customers_list"><%= render 'customers' %></div>
The _form.html,erb partial file
<%= 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:
<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
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag '.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
I am converting a standard scaffold generated application to use AJAX and JQuery in a similar manner to that specified in http://stjhimy./posts/07-creating-a-100-ajax-crud-using-rails-3-and-unobtrusive-javascript.
I followed all the instructions :
- Creating a posite Index view using 2 partials;
- Updated the Controller,only retaining Index, Create, Edit,Update and Destroy actions;
- created js.erb files for the Create, edit, update and destroy actions that use JQuery functions to update the DOM.
Can't seem to access the js.erb files at all. Put the js.erb in the with the view files , for example app/views/customers/create.js.erb
The code for the create.js.erb is :
<% 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
<div id="customer_form"><%= render 'form' %></div>
<div id="customers_list"><%= render 'customers' %></div>
The _form.html,erb partial file
<%= 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:
<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
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag 'http://ajax.googleapis./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
Share
edited Dec 14, 2011 at 21:52
iwasrobbed
46.7k21 gold badges151 silver badges195 bronze badges
asked Dec 13, 2011 at 22:01
JimmyBanditJimmyBandit
1091 gold badge1 silver badge7 bronze badges
0
1 Answer
Reset to default 4When 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. Instead, it will render it with the default 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./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).
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. 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.
For the jQuery and jQuery-UJS install on Rails 3.0, follow these directions:
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.
Then run 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 remend reading a different tutorial (like this one if you still want to read about AJAX w/ Rails: http://net.tutsplus./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/ruby-on-rails-tutorial-book).
本文标签: javascriptHandling jserb files in Rails 3Stack Overflow
版权声明:本文标题:javascript - Handling js.erb files in Rails 3 - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742220263a2435322.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论