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')) %>" );
