Table of contents
1.
Introduction
2.
Ajax and its Implementation
2.1.
Unobtrusive Javascript
2.2.
Implementation in Rails
3.
Creating An Application
3.1.
Creating Ajax
4.
FAQs
5.
Key Takeaways
Last Updated: Mar 27, 2024

Ruby on Rails- Ajax

Author Naman Kukreja
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Whenever you visit a website and click on a link or submit a form, you will get the data according to your responses. How does this happen when you are redirected to a new page with the result or on the same page without even refreshing the page?

The answer is with the use of ajax, as it enables the user to retrieve data without refreshing the content of the entire web page.

This is the basic introduction of ajax. We will learn more about it further in the blog.

Ajax and its Implementation

Ajax refers to Asynchronous Javascript and XML. Ajax is a combination of several technologies. The technologies Ajax contains are :

  • CSS for styling
  • Data interchange and manipulation using XML
  • Data retrieval using XML HTTP request
  • XHTML for the markup of web pages
  • A dynamic interaction and display using DOM
  • Javascript glue all these together

Generally, when the user clicks on a link or submits a form. The form gets submitted to the server, and then the server sends back the response, which is shown on a new page.

While interacting with an Ajax-powered web page, it loads a Java Script written Ajax engine in the background whose responsibility is to display the result to the user and communicate with the webserver.

When the user submits the form while working with ajax, the server sends its response in the HTML fragment, and then it displays on the new page without refreshing the current page.

Unobtrusive Javascript

For handling the attached javascript to the DOM, rails use the technique known as Unobtrusive Javascript. This is considered as one of the best techniques in the front-end community.

In this, we don't mix javascript code into HTML. It also has some benefits, like users can access the whole javascript on every page as it caught after at every page after downloading from the first page.

Implementation in Rails

Rails have a consistent and simple model for Ajax implementation and its operations. Different users trigger an Ajax Operation after the browser has rendered and displayed the initial web page.

  • Some trigger fires - These are the changes like a user making changes in the form or clicking on a button or a link.
  • The web client calls the server- XMLHttpRequest is a Javascript method that sends data related to the trigger with an action handler on the server. The data might be the text in the henry field, the ID of the checkbox, or the complete form.
  • The server processing-  The action handler of the server-side does some processing with the data and returns the HTML fragment to the web client.
  • Response to the client- The client’s side javascript changes the web page's content according to the received HTML fragments by the server.

Creating An Application

This example will provide different operations like the show, list on ponies table.

Let’s start with creating the application.

rails new ponies

We have created the application. Now we have to call the app directory by using the cd command. With this, it will enter into an application directory, and after that, we need to call a scaffold command.

Rails generate scaffold Pony name: string profession: string

The scaffold is generated with the profession and name column above. Now we need to migrate the database:

rake db: migrate

Now the output in the browser is like below:

Creating Ajax

Now in any text editor of your choice, open app/views/ponies/index.html.erb. User need to update their destroy line  with :remote =>true, :class=>’delete_pony’.

In your folder ponies create a new file named destroy.js.erb and place it along with other .erb files.

Enter the following code in destroy.js.erb

$('.delete_pony').bind('ajax:success', function() {
   $(this).closest('tr').fadeOut();
});

From app/controllers/ponies_controllers.rb open the controller file and the following code

# DELETE /ponies/1
# DELETE /ponies/1.json
def destroy
   @pony = Pony.find(params[:id])
   @pony.destroy
   
   respond_to do |format|
      format.html { redirect_to ponies_url }
      format.json { head :no_content }
      format.js   { render :layout => false }
   end
   
end

Run the application now the output screen will be as follows:

Press create button, and it will generate the result for you as follows:

To check all the created pony, click on the back button. It will show the image as follows:

When you click on destroy control, it will call a pop-up like this.

If you click on ok, it will delete the record from the pony. Then the final output will be like this:

FAQs

  1. Name some of the different technologies used in Ajax.
    Some of the various technologies used by Ajax are HTML, CSS, JSON, XSLT or XML, Javascript, etc.
     
  2. Name some languages in which Ajax works.
    Some languages in which Ajax works are Java, Ruby, etc.
     
  3. Is it possible to set session variables in Ajax from javascript?
    No, it is not possible.
     
  4. What is poling in Ajax?
    It is a process for retrieving data from the server to have data regularity is known as poling.

Key Takeaways

In this blog, we learned about AJAX, its implementation, its example by creating an application, and much more.

If you want to know about Scaffolding in Ruby on Rails, like what they are, how to create them, how to use them, etc. Then it would be best to refer to this blog here. You will get a whole idea about all this stuff and many more.

Live masterclass