[JAVA] Posting function implemented by asynchronous communication in Rails

Introduction

This time, we will implement the posting function by asynchronous communication. This time, we will start from the state where the posting function with screen transition is already implemented in order to focus on performing asynchronous processing. In order to understand js, it will be described in plain js. Also, since I am a beginner, I would appreciate it if you could point out any mistakes.

Step 1 Add remote: ture

Let's add remote: ture to the input form!

<%#Task input form%>
<div class="task-contents">
    <%= form_with model: @category, id: 'new_tasks', class: 'new_tasks' do |f| %>
     <div class="task-field">
       <%= f.text_field :task %>
     </div>
     <div class="task-actions">
       <%= f.submit "+" %>
     </div>
    <% end %>
</div>

Where is remote: ture here? I think some people think that if you use form_with, it is specified to perform ajax communication by default, so you do not need to write anything when using form_with. On the contrary, if you do not use ajax communication, set local: true to make a normal request. If you use form_for, don't forget to add the remote: true option. If you are worried, you should check it with a development tool etc. and it should be data-remote = "true".

Step 2 Controller description

def create
      @category = Category.new(category_params)
      @category.save
      @categories = current_user.categories.all
end

Although it is a description that performs a general save function, the description of @categories = current_user.categories.all is described because it is necessary as information to be passed to js after this.

Step 3 Write JavaScript in create.js.erb

Create the create.js.erb file because the content returned by remote: true is not HTML but the action name.js.erb file is read

(function(){
  document.querySelector(".task-lists").innerHTML =  '<%= j(render 'categories/index', categories: @categories) %>'
  document.querySelector("#category_task").value = ''
})();

I am rewriting the contents of HTML with .innerHTML.

'<%= j(render 'categories/index', categories: @categories) %>' Here we have defined it in step 2 to pass @categories. document.querySelector("#category_task").value = '' This description leaves the input form empty.

Finally

This completes the asynchronous posting function! The important thing is that if you can understand the data flow of ajax communication, each process is simple and easy to understand. Since it is a beginner, I would appreciate it if you could teach me if there is a better description.

If you like articles such as asynchronous deletion, please ~ https://qiita.com/shantianchengyilang316/items/10ab2d84f6cfcfd29def

Recommended Posts

Posting function implemented by asynchronous communication in Rails
Implemented follow function in Rails (Ajax communication)
[Rails, JavaScript] Implemented like function (synchronous / asynchronous communication)
[Ruby on Rails] Asynchronous communication of posting function, ajax
[Rails] I implemented the validation error message by asynchronous communication!
[Rails 6] Asynchronous (Ajax) follow function is implemented
[Rails] Implemented hashtag function
Implement application function in Rails
Implement follow function in Rails
[Rails] (Supplement) Implemented follow function
[Rails] Implement image posting function
I tried to implement the like function by asynchronous communication
Implement login function in Rails simply by name and password (1)
Implement login function in Rails simply by name and password (2)
[Rails] Asynchronous implementation of like function
Add a search function in Rails.
Implemented mail sending function with rails
Implement simple login function in Rails
[Rails] Voice posting function ~ Cloudinary, CarrierWave
[Rails 6] Like function (synchronous → asynchronous) implementation
Implement CSV download function in Rails
[Rails] Function restrictions in devise (login / logout)
[Rails] Image posting by CarrierWave [AWS EC2]
How to implement image posting function using Active Storage in Ruby on Rails
Create authentication function in Rails application using devise
Implement star rating function using Raty in Rails6
[Rails] Implementation of retweet function in SNS application
How to separate .scss by controller in Rails
Implement iteration in View by rendering collection [Rails]
How to make a follow function in Rails
Simple notification function in Rails (only when followed)
Rails refactoring story learned in the field
Posting function implemented by asynchronous communication in Rails
I tried to implement the like function by asynchronous communication
[Rails] I implemented the validation error message by asynchronous communication!
[Rails 6] Ranking function
Image posting function
[Rails] Category function
[Rails 6.0] I implemented a tag search function (a function to narrow down by tags) [no gem]
Group_by in Rails
Rails follow function
Implemented comment function
[Rails] Notification function
Implement post search function in Rails application (where method)
[Rails] Implement credit card registration / deletion function in PAY.JP
Implement user follow function in Rails (I use Ajax) ②
[Ruby on Rails] Posting score ranking function (whole display)
[For Rails beginners] Implemented multiple search function without Gem
Rails application guest login function implemented (devise not used)
[Ruby on Rails] Post image preview function in refile
I want to define a function in Rails Console
Implement user follow function in Rails (I use Ajax) ①