Ajax facilitates user to retrieve the data for a web page, for the entire page. User does not need to refresh the content.
When user works with the basic web architecture, it allows user to click a link or submit a form, which will be further submitted to the server and sends back a response, then user’s response will be displayed on a new page.
To find more about AJAX check through link AJAX Tutorial
Rails, has easy and steady model for how it implements Ajax operations. Ajax operations works and displays the like any other basic web architecture but faster and displays user data in one operation.
Sequence of activities of Ajax operation
Let’s go back to our Library example, where created table called subject and also added few subjects at the time of Migration. As of now we haven’t provided with procedure to add and delete subjects in this table.
Here let’s use Ajax on our library by providing list, show and create operations to subject table.
Controller for subject can be created by following the below
Above command creates a controller file app/controllers/subject_controller.rb. To have the following content, open the saved controller file and modify using any test editior.
Implementation process for all these functions will be as same as mentioned in the earlier chapters.
This method will be used to list down all the subjects available in our database.
This method will be used to display a particular subject corresponding to pass ID.
The above code is not redirecting the page to any other page but just rendering only changed part instead of whole page.
This can be written using partial, no need to write a complete view file, just write a partial in /app/view/subject directory.
This will be the final controller file /app/controllers/subject_controller.rb which looks as below
Now create view files for other methods.
Let’s create view files for all the methods but not for create method, Create file will be created using a partial.
Create a file list.html.erb in /app/view/subject and populate it with the below code.
Here, iterating through the @subjects array and outputting a <li> element containing a link to the subject it is referencing for each item in the array. Additionally, you are outputting the number of books in that specific subject inside parentheses. Rails' associations make it easy to step through a relationship and get information like this.
Once done try browsing the Subject list using http://localhost:3000/subject/list. This will display the following screen.
Before testing above, make sure the Web Server is up and running
Create a file show.html.erb in /app/view/subject and populate it with the following code.
Here, by clicking on any subject user can find a listing of all the books available under specified subject.
create method will be created using partial instead of view, which will be discussed in the next chapter.
Rails is bundled with numerous libraries, which make using Ajax in Rails is easy. Two libraries prototype and script.aculo.us are very popular.
For the libraries support (Prototype and script.aculo.us) to the application, Can be done adding standard.html.erb layout file in app/views/layouts then add the following line before the </head> tag, and save changes
This includes both the Prototype and script.aculo.us libraries in the template so their effects will be accessible from any of the views.
Now add the following code at the bottom of app/views/subject/list.html.erb
Second section is the creation of the add_subject <div>, its visibility should be hidden by default using the CSS display property. The link_to_function is will change its property and show the <div> to the user to take input as required to add a new subject.
Now create Ajax form, using the form_remote_tag, which is similar to Rails helper form_tag tag, but it’s helps here to let the Rails framework know that it needs to trigger an Ajax action for this method. The form_remote_tag takes the :action parameter just like form_tag.
There are two additional parameters :update and :position.
Now, create the standard form fields and submit buttons discussed as before and wrap things up with an <% end %> to close the <form> tag with equivalent </form> tag. Make sure that things are semantically correct and valid XHTML.
We are creating partial for create method to add a subject and inside using one partial.
Under app/views/subject, create a new file named _subject.html.erb. and note that all the partials are should be named with an underscore (_) at the beginning.
Add the below code into this file the created partial file
User can now easily add several subjects without refreshing the page after each subject is added.
Once added, try browsing Subject list using http://localhost:3000/subject/list, which will be displayed as shown below
Try adding subject in the name field and click on Add button, added subject would be displayed at the bottom of all available subjects; note that we are not refreshing the page here.
Ruby on Rails 2.1 Related Interview Questions
|Python Interview Questions||HTML 5 Interview Questions|
|PHP Interview Questions||PostgreSQL Interview Questions|
|Ruby Interview Questions||Django Interview Questions|
|wxPython Interview Questions||MongoDB Interview Questions|
|Python Automation Testing Interview Questions||GitHub Interview Questions|
|Ruby Sinatra Interview Questions|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.