Ajax Calls In Rails. How To Implement Delete Actions Without Reloading The Page?

Ajax Calls In Rails. How To Implement Delete Actions Without Reloading The Page?

Written by Michelle Fernandez on Aug 3rd, 2021 ・ Views ・ Report Post

Michelle Fernandez Visit User Profile

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.

Advantages of AJAX:

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.

#/app/contollers/students_controller.rb

classStudentsController<ApplicationControllerdefdestroy

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

@student=Student.find(params[:id])

@student.destroy#Itwilldictatewhatformattheactionwillrespondto

respond_todo|format|

format.html#whenrespondingtoahtmlrequest,itwillrespondbygoinginto/app/views/students/destroy.html.erb

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

endend

  1. The controllers_name#index looks like this:

#/app/views/students/index.html.erb

<%@students.mapdo|student_info|%><tbodyid="deleteStudent<%=student_info.id%>">

<trclass="text-center">

<tdclass="text-center"><%=link_tostudent_info.id,student_path(student_info),:class=>'btnbtn-default'%>

%=student_info.name.capitalize%> %=student_info.language%> %=student_info.age%> %=link_to(student_path(student_info),method::delete,remote:true) do%>

<pclass="text-center"><spanclass="glyphiconglyphicon-trash">

<%end%>

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.

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

#/app/views/students/destroy.js.erb

letdelete<%[email protected]%>=document.querySelector("#deleteStudent"+<%[email protected]%>);

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.

Conclusion:

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.

Comments (0)