AJAX in Ruby On Rails: Sample Application

1) Create a new project. Generate Model and Controller

[shabbir@neutron Aptana Studio 3 Workspace]$ rails new ajax1

[shabbir@neutron Aptana Studio 3 Workspace]$ cd ajax1/

[shabbir@neutron ajax1]$ rails generate model Task name:string 

[shabbir@neutron ajax1]$ rake db:migrate 

[shabbir@neutron ajax1]$ rails generate controller tasks index


2) routes.rb

  resources :tasks

  root 'tasks#index'


3) task_controller.rb

class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end

  def new
    @task = Task.new
  end

  def create
    @task= Task.new(task_params)
    @task.save
   
    @tasks = Task.all
  end     

  def edit
    @task = Task.find(params[:id])
  end
 
  def update
    @task = Task.find(params[:id])
    @task.update(task_params)

    @tasks = Task.all
  end

  def destroy
    @task = Task.find(params[:id])
    @task.destroy

    @tasks = Task.all
  end
 
  private
  def task_params
    params.require(:task).permit(:name)
  end
end


4)  Views

When the user clicks on the "New Task" link, an AJAX request is sent to the server since "remote: true' is set.
index.html.erb

<div>
    <%= link_to "New Task" , new_task_path, id: "new_link", remote: true %>
</div>

<div id="task_form" style="display:none">
</div>

<h2> List All Tasks </h2>

<div id="tasks">
<%= render 'list' %>
</div>


When the user clicks on the "Edit" or "Delete" links, an AJAX request is sent to the server since "remote: true' is set.
_list.html.erb

<table>
<tr>
    <th>Name</th><th colspan="3"></th>       
</tr>   
<% @tasks.each do |task| %>
    <tr>
        <td><%= task.name %> </td>
        <td><%= link_to 'Edit', edit_task_path(task), remote: true %></td>
        <td><%= link_to 'Delete', task, method: :delete, data: {confirm: 'Are you sure ?'}, remote: true %></td>
       
    </tr>
<% end %>
</table>





When the user submits the form, an AJAX request is sent to the server since "remote: true' is set.
  _form.html.erb

<%= form_for @task, remote: true do |f| %>

<%= f.label :name %>
<%= f.text_field :name %>

<%= f.submit "Save" %>
<% end %>


5) Javascript


When the user clicks on the "New Task" link, the form is displayed and the "New Task" link is hidden.  
new.js.erb

$("#new_link").hide();

$("#task_form").html("<%= j (render 'form') %>");

$("#task_form").slideDown();



After the Task is created, the "New Task" link is displayed ,the form is hidden and the list of tasks is updated.

create.js.erb

$("#new_link").show();

$("#task_form").slideUp();

$("#tasks").html("<%= j (render('list')) %>" );




When the user clicks on the "Edit" link, the form is displayed and the "New Task" link is hidden.  

edit.js.erb

$("#new_link").hide();

$("#task_form").html("<%= j (render 'form') %>");

$("#task_form").slideDown();


After the Task is updated, the "New Task" link is displayed ,the form is hidden and the list of tasks is updated.

update.js.erb
$("#new_link").show();

$("#task_form").slideUp();

$("#tasks").html("<%= j (render('list')) %>" );


When the user clicks on the "Delete" link, the task is destroyed and the list of tasks is updated.

destroy.js.erb
 $("#tasks").html("<%= j (render('list')) %>" );