Operating environment Ruby 2.6.5 Rails 6.0.3.2
Now that I've finally figured out how preventDefault works in JavaScript, I've posted it to organize it.
Before we talk about the need for preventDefault, let's talk about what preventDefault does in the first place.
You may think that it is not explained, but if you try to explain it exactly, it will probably require a considerably long number of lines, and I think that it is easier to understand if you give a concrete example, so in short explained. I will explain based on a concrete example immediately.
Ruby:index.html.erb
<%= form_with url: "/posts", method: :post do |form| %>
<%= form.text_field :fuga %>
<%= form.submit 'Post' , id: "submit" %>
<% end %>
If you click the post button in index.rb, the content entered in fuga will be posted. If you leave it as it is, clicking the post button will start loading the page, so let's assume that you have made asynchronous communication by writing the following JavaScript.
function hoge() {
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
//Code that behaves the same as when you click the post button (it will be longer, so omitted)
});
};
window.addEventListener("load", hoge);
However, there is one problem here. That is, because the same behavior is additionally performed by using asynchronous communication, one post will result in posting twice. Specifically, by clicking the post button, asynchronous communication is performed, the number of posts is increased by one without loading the page, and by reloading the page, when the original post button is clicked. The behavior is reflected and the number of posts is increased by one. Therefore, as a result, the same post will be posted twice.
Use prevent.Default to solve this problem. Just add one line as below.
function hoge() {
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
//Code that behaves the same as when you click the post button (it will be longer, so omitted)
});
};
window.addEventListener("load", hoge);
This can interfere with the default behavior, so you don't have to post twice in a single post. However, here I asked, "What is the default behavior in the first place?" "Why isn't the behavior of asynchronous communication only disturbed conveniently?" I had a question.
Basically, the default behavior in Ruby on Rails seems to be fine in recognizing that the operation in the view sends information from the view to the controller and one of the actions in the controller moves. In this case, the default behavior is that clicking the post button will cause the create action to work and save fuga. It's the normal flow of Ruby on Rails. Therefore, I regard preventDefault as ** "an obstacle to the normal flow of Ruby on Rails" **.