[JAVA] Rails implementation of ajax removal


This time we will implement the asynchronous deletion function using rails and js. Please note that jQuery is not used for learning plain js. Also, since you are a beginner in programming, please point out any mistakes!

What is ajax in the first place?

Ajax is also called asynchronous communication, and it is a process to change only the changed part of the screen without changing the screen. This reduces unnecessary rendering, shortens loading time, and allows users to use the service comfortably. By the way, synchronous communication redraws the entire screen, so even if the changed part is a part, the entire screen will be rendered. It can be a little stressful for the user.

Difference between synchronous communication and asynchronous communication processing

Synchronous communication moves to the action of the specified controller when the deletion is done and looks for the action name.html.erb file. Asynchronous communication, on the other hand, is the same until the action of the specified controller is executed, after which it searches for the action name.js.erb file. Please be aware of the flow of these processes and try implementing after this.

Step 1 remote: add true option

<li><%= link_to 'Delete', category_path(category.id), method: :delete, remote: true, class:'category-destroy' %></li>

Add remote: true to the link_to description. With this alone, you can send a request from HTML format to JS format.

Step 2 Describe the js processing in the destroy.js.erb file

By adding remote: true, we will search for the js file. Furthermore, by using js.erb, you can embed the ruby grammar in the js description. This file is treated as a view file, so please store it in the corresponding views folder. I am passing the information I want to delete with querySelector ("# category- <% = @ category.id%>"). The specified target is being removed with .remove (). With these descriptions, you can erase certain elements in the view. By the way, even if you do not write js, it is deleted from the DB, but it will not disappear from the screen unless you reload it, so you need to write js.


  document.querySelector("#category-<%= @category.id %>").remove()


This completes the deletion function by asynchronous communication! Asynchronous communication using rails is very easy to implement, so even beginners should definitely try it! I hope this article helps beginners. Please point out any mistakes!

Recommended Posts

Rails implementation of ajax removal
Implementation of like function (Ajax)
[Rails 6] Implementation of search function
[Rails] Implementation of category function
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
[Rails] Implementation of user logic deletion
[Rails] Implementation of CSV import function
[Rails] Asynchronous implementation of like function
[Rails] Implementation of image preview function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
[Rails] Implementation of many-to-many category functions
Implementation of GKAccessPoint
Rails [For beginners] Implementation of comment function
[Rails 6] Implementation of SNS (Twitter) sharing function
[Vue.js] Implementation of menu function Implementation version rails6
[Ruby on rails] Implementation of like function
[Rails] Implementation of validation that maintains uniqueness
[Vue.js] Implementation of menu function Vue.js introduction rails6
Implementation of Ruby on Rails login function (Session)
[Rails 6] Implementation of inquiry function using Action Mailer
[Rails] Implementation of image enlargement function using lightbox2
[Rails] Implementation of retweet function in SNS application
[Rails] Implementation of "notify notification in some way"
[Rails] Implementation of batch processing using whenever (gem)
[Rails] Implementation of PV number ranking using impressionist
[Rails] Implementation of image slide show using Bootstrap 3
Rails hashtag search implementation
Rails6 countdown timer implementation
[rails] gem'payjp' implementation procedure
Implementation of flash messages
Comment function (Ajax) implementation
[Rails] Introduction of PAY.JP
Rails Action Text implementation
Follow function (Ajax) implementation
Implementation of search function
Rails Tutorial/Significance of Indexing
Applied implementation of chat-space
Rails search function implementation
Implementation of pagination function
Ruby on Rails <2021> Implementation of simple login function (form_with)
[Ruby on Rails] Asynchronous communication of posting function, ajax
[Rails] Implementation of drag and drop function (with effect)
Implementation of Ruby on Rails login function (devise edition)
[Ruby on Rails] Implementation of tagging function/tag filtering function
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
[Rails] When using ajax, be aware of "CSRF measures".
[Rails] Implementation of multi-layer category function using ancestry "seed"
[Rails] Implementation of SNS authentication (Twitter, Facebook, Google) function
Explanation of Ruby on rails for beginners ⑦ ~ Flash implementation ~
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
[Swift] Simple implementation of UIImageView
Rails fuzzy search function implementation
[Rails] Introduction of devise Basics
[Rails] Implementation of automatic address input using jpostal and jp_prefecture
Implementation of sequential search function
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
[Swift] Implementation of ultra-simple billing
Utilization of Rails Boolean type