allenarlene's picture
allenarlene
8 Boards 11 Marks 0 Likes 0 Followers 0 Following 0 Unfollowers 2 views

Marked 3 years 11 months ago onto Ajax Calls In Rails

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

Source: https://www.cryptextechnologies.com/blogs/ajax-calls-in-rails

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

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">

<%=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%>

<%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.

3) 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.

Category: 
Comments
Leave your comment below

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Non-latin text (e.g., å, ö, 漢) will be converted to US-ASCII equivalents (a, o, ?).
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Marked onto the category

Technology

Buy Custom Solar Power Bank with Personalised Logo Printingair cargo solutions5g-sa-network-controlled-robot-du-adipec-techxmediaExpert Splunk Consulting Services in US | IT Service IntelligenceBase Network Đạt Côt Mốc Mới Về Khối Lượng Giao DịchIntelligent planning platformPHP Web Development Company USA, UK, India | PHP Development Company US
iOS App Development Company | iOS App Development Services - Impressico
Originally Marked by

allenarlene

Hire Shopify Developer – Shopify Development Services in India
how to make your music available worldwide through streaming Platforms?
dApps - Decentralized Applications
Things your remote training strategy is missing.
Ways to make UI more attractive.
Cryptocurrency - the future of finance
Marked onto the board

Ajax Calls In Rails

Ajax Calls in Rails. How to implement Delete Actions Without Reloading the Page?
Navigation
User login
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Recent comments
Latest tweets
Who's online

There are currently 0 users online.

Scroll to top
randomness