-->
ROOM ZKE
USAComment.com
Zicutake USA Comment | Search Articles



#History (Education) #Satellite report #Arkansas #Tech #Poker #Language and Life #Critics Cinema #Scientific #Hollywood #Future #Conspiracy #Curiosity #Washington
 Smiley face
PROXY LIST

[Calculate SHA256 hash]
 Smiley face
Zicutake BROWSER
 Smiley face Encryption Text and HTML
Aspect Ratio Calculator
[HTML color codes]
 Smiley face Conversion to JavaScript
[download YouTube videos in MP4, FLV, 3GP, and many more formats]

 Smiley face Mining Satoshi | Payment speed
CALCULATOR DIMENSIONS AND RECTANGLE

 Smiley face
CREATE ADDRESS BITCOIN
Online BitTorrent Magnet Link Generator
[PERCENTAGE CALCULATOR]
JOURNAL WORLD:

SEARCH +8 MILLIONS OF LINKS ZICUTAKE STATE

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