Geek Answers Handbook

Processing js.erb files in Rails 3

I am converting a standard application created using scaffold to use AJAX and JQuery according to what is stated at http://stjhimy.com/posts/07-creating-a-100-ajax-crud-using-rails-3 -and-unobtrusive-javascript .

I followed all the instructions:

  • Creating a combined representation of indices using 2 partial;
  • The controller is updated, only saving the actions "Index", "Create", "Edit", "Update and destroy";
  • js.erb files have been created to create, edit, update, and destroy actions that use jQuery functions to update the DOM.

Seems to be unable to access js.erb files. Put js.erb in a file with view files, for exampleapp/views/customers/create.js.erb

Code for 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 %>

:

index.html.erb

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

_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 %>

_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

:

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 fille 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
+5
1

form 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

format.html , 100% ajax CRUD, , - , JS (format.js).

Update: , ... , , CRUD (, , , ) 100% - -, , , .js.erb . , , Processing SomeController#some_action as JS, create, show, update destroy .

jQuery jQuery-UJS Rails 3.0 :

rails.js, , jquery_ujs.js, . , jquery_ujs.js.

rails generate jquery:install

:

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

, , , , - . , , Ruby on Rails, (, , AJAX w/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).

+4

More articles:


All Articles