The Power Of Ajax in Rails

Ajax stands for Asynchronous JavaScript and XML.

 Before we start with Ajax in detail, let me explain how web page load to our system in normal way. when we type localhost:3000/

If the  default root path is set then it will check in routes file; it fetches all the files will be needed for showing the files.

When server receives the request ,  it will return the appropriate responses. So that there is request response cycle.

Using JavaScript; we can also send the requests to servers.

In this tutorial we look only in the rails way and deals with rails part

Ajax Example 1: Delete student via Ajax

in this example ; create a sample app named student_details .All students have id and  name. When we click on one student option delete then that student is destroyed.

  1. create a new app

        console:\> rails new student_details

1

2. change that path

            cd student_details

2

3. now we can create a controller named students, with name and id

rails g scaffold Student name:string

3

4. do the migration

rake db:migrate

4

tada .. all done  now we can do the Ajax part.

The selected student is deleted from the table and at that instant ; it will be hide from the index page

navigate to http://localhost:3001/students

now we have an index file  then add a student there. Then click on destroy button .we can see the page reloaded.8

  Also we can see the background queries firing against that.

9

Now goto index.html.erb (app/views/students/index.html.erb). Add a line in the link_to destroy .

remote: true, :class => ‘delete_student’

The need for these logic is that we are explicitly tell that delete is going for Ajax call and create a class if it is a success.

Now we need to create a js file called destroy.js.erb which will be explained  later. This file will be created at along with erb files. Paste the following code in destroy.js.erb

$(‘.delete_student’).bind(‘ajax:success’, function() {
$(this).closest(‘tr’).fadeOut();
});

the code above is in  JQuery ,what we do is that when delete is success then we have to hide that set of student details.

Thats all . fundamentally Ajax need a partial file to render in a page when some action is clicked.

Ajax Example 2: render new  page as Ajax

 When we click on the new student , we need to create an option for add new student via Ajax. So what we are planning is ; create a div tag; when we click on the new student then the form will render in the index page in place of our div tag

  1. Goto your index page

11

create a div tag as above , you can use any name as id in the div tag

2. open your new.html.erb in the app/views/students/

rename your file as a partial, no need of any heavy work ; just add the underscore before the file name. _new.html.erb

3. now we need to explicitly tell that is is Ajax request , for that what we need to do is

just add remote: true option in calling the  link_to in the index page

13

4. create a js with name new.js.erb which will tell the browser that it is an Ajax request and need to load the file is _new.html.erb

14

5.add the following code to the new.js.erb

$(‘#new_student’).append(“<%=j render :partial =>”new”%>”);

it is simple jquery, tells that need to add the _new.js.erb to the new_student div

15

also the background operations are of ..

16

Ajax Example 3: Show student detail via Ajax

in the same way as example 2.

1.create a div tag or we can use the same tag as we used in the new student . for sake of clarity i will use a new div tag.

17

2. set remote: true option in the show

18

3.rename show.html.erb as _show.html.erb as partial

19

4. create a new file show.js.erb

use the below code inside in the file

$(‘#show_student’).append(“<%= j render :partial=> “show”%>”);

20

Courtesy : Albert Paul, Rajesh CO ,Tutorials Point ..

if any queries please update,

 

 

 

 

 

 

 

 

 

 

Advertisements

2 Comments Add yours

  1. meera says:

    Good one .. 🙂

    Like

  2. Deepa says:

    Nice article.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s