Ajax Calls in Rails. How to implement Delete Actions Without Reloading the Page?

By:Category: Ruby on Rails Technologies: Ruby on Rails

Rails are useful while implementing CRUD (Create, Read, Update, and Destroy) for the models. The data gets deleted, once the whole page is reloaded. Without page reload, the data needs to be removed with functions like deletion of data. Only then the user can call Ajax in Rails.

The need to call ajax for deletion without reloading the page:

Ajax enables web pages to update asynchronously by exchanging data with the webserver. This indicates that it is possible to update specific parts of a web page without reloading the entire page.

With AJAX, the user can send and receive data asynchronously without reloading the web page. AJAX allows the user to send important data to the server. Only the valuable information from the client-side is routed to the server-side. It makes the application more interactive.

The following steps can be followed to delete records without reloading the page:

With this mechanism, the idea is to communicate with the back-end via javascript employed on the front end.

1) Rails uses JSON Response. Using the concept of remote: true, it gets enabled by default in Rails and reduces the amount of Js code for the action to run.







format.js #when responding to a json request, it will respond by generating js code located inapp/views/students/destroy.js.erb


2) The controllers_name#index looks like this:








<td><%=link_to(student_path(student_info),method::delete,remote:true) do%>




As mentioned above, the bold lines of code are in charge of communicating the actions happening in the back-end to the front-end. In other words, when the user deletes the student instance, the front-end reflects these changes without reloading the page.

3) For this to work, the user needs to create the logic in the destroy.js.erb that is called from the controller.



Defining the actions of destroying in the controller, enables the user to request the delete action by clicking once on the button. Adding Rails Helper remote: true stops the default action of the object and instead performs the Ajax call.

The delete action relies on the controller and the method destroy. By adding the Ajax call, this action occurs without the need of reloading the webpage. Without the destroy.js.erb, the student instance will get deleted from the database. But the user still has to reload the page, to see the changes.

Originally published at https://www.cryptextechnologies.com.




Cryptex specializes in developing open source web applications and software solutions across all domains and verticals using Ruby on Rails (ROR) technology

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Effective Web Conferencing Software For Small Business


The Magic of PHPStorm IDE in Database Management

This image shows the list of supported databases shown in the database tool window.

Enforcing formatting standards for your Java project using Gradle

QUUBE Exchange on Discord now!

iOS Interview Assessment (Part 1)

An opinionated Elixir Style Guide

Agile. Is there really an alternative?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cryptex Technologies

Cryptex Technologies

Cryptex specializes in developing open source web applications and software solutions across all domains and verticals using Ruby on Rails (ROR) technology

More from Medium

RuboCop: How to install and configure — SourceLevel

Rails 6 — Nested Form In Rails 6 | Rejka Permana

Amazon Selling Partner API Authorization Guide with Ruby on Rails.

Ruby on Rails x Stimulus — How to make a great tab bar