Rails learning day 4

Ruby on Rails Quick Learning Practice Guide chapter8

8-2 Communicate with Rails server with Ajax

Ajax: A Javascript programming method for asynchronous communication on a web browser and refreshing a page without reloading the page.

Normally, even if the page is updated by receiving a request from the server, even if it is a slightly different page, all parts of the page are read and displayed from 1 every time, but if you use Ajax, only the part is dynamically processed Uses the page as it is without going through the server

This time, the process of deleting the task will be processed using Ajax. There are two main operations performed by Ajax processing.

① Operation to delete a task. (2) Operation to display the list screen that reflects the deleted task.

Write these two codes.

Delete the task of ①. But this can't do anything without a server, so I use a server with Ajax. In order to delete the task of ①, you have to use ❶ Ajax to jump to the delete action from the view and ❷ rewrite the delete action for Ajax.

❶ How to skip the link to the delete action with Ajax

Code before change

ruby:app/views/tasks/index.html.slim

=link_to 'Delete', task, method: :delete, data:{confirm: "task"#{task.name}」をDeleteします。よろしいですか？"},class: 'btn btn-danger'

Code after change

ruby:app/views/tasks/index.html.slim

=link_to 'Delete', task, method: :delete, remote: true, data:{confirm: "task"#{task.name}」をDeleteします。よろしいですか？"},class: 'btn btn-danger'

To use the Ajax feature, just enter remote: true.

❷ Rewrite delete action for Ajax

Code before change

app/controller/tasks_controller.rb

def destroy
  @task.destroy
  redirect_to tasks_url, notice: "task"#{@task.name}Was deleted"
end

Code after change

app/controller/tasks_controller.rb

def destroy
  @task.destroy
  head :no_content
end

It is good to replace the thing that does not need to go through the server by operating the controller with Ajax. This time I replaced the redirect_to method. Since the redirect_to method goes through the route that is reflected to the browser once via the server, it is reflected without going through it with Ajax. By writing head: no_content instead, you can get a response that the deletion is successful without going through the server.

② Operation to display the list screen that reflects the deleted task.

Operate the list screen using an event handler. What is an event handler? An intermediary position that receives an opportunity and performs some processing.

First, add a delete class to make it easier to understand just by looking at the trigger that is the target of the event handler.

ruby:app/views/tasks/index.html.slim

=link_to 'Delete', task, method: :delete, remote: true, data:{confirm: "task"#{task.name}」をDeleteします。よろしいですか？"},class: 'btn btn-danger delete'

Then use the delete class to write the event handler and the action to execute

app/assets/javascript/tasks.js

document.addEventListener('turbolinks:load', function(){
  document.querySelectorAll('.delete').forEach(function(a){
    a.addEventListener('ajax:success', function(){
      var td = a.parentNode;
      var tr = td.parentNode;
      tr.style.display = 'none';
    });
  });
});

8-2-3 Return Javascript from the controller and execute it

In the above, the task was deleted on the server, and the view was changed by Javascript in the prepared event handler. However, there is another pattern of operations that produces the same result.

How to pass the information "Please delete" from the browser to the server, and this time the server returns a response containing Javascript. The server judges the deleted task (called SJR) by the id element, and returns the Javascript operation "Delete the task with that id" at the time of response.

First attach a dedicated id element to the server to figure out which tasks have been deleted

ruby:app/views/tasks/index.html.slim

table.table.table-default
...
tbody
  - @task.each do |task|
    tr id="task-#{task.id}"
      td= link_to task.name, task
      ...

I created a dedicated id element called id = "task-# {task.id}".

Create a file app / views / tasks / destroy.js.erb corresponding to the destroy action and write the operation of js you want from the server there.

ruby:app/views/tasks/destroy.js.erb

document.querySelector("#task-<%= @task.id%>").style.display = 'none'

With this, the operation of js comes with the response from the server Finally, delete redirect_to of destroy action

app/controller/tasks_controller.rb

def destroy
  @task.destroy
end

8-3　Turbolinks turbolinks: Speeding up by automatically Ajaxing page transitions for all link clicks

8-4-2-2 Execution of compilation

Compile: Files that can be executed by a computer are verbalized so that the computer can easily understand them. It is not understood by humans. But the file must be created by humans. At that time, first of all, you have to create a file in a language that humans can understand and automatically change it into a language that is easy for a computer to understand. Call that operation compile