Handling js.erb files in Rails 3

Question

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.

I followed all the instructions :

• Creating a composite 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.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

Answer 1

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. 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.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).

---

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 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).