[RAILS] Introduction of jQuery-until it can be used (record executed in preparation for asynchronous communication) haml

• For a summary of those who want to check all asynchronous communication procedures from jQuery here

Preparation for introduction

We will introduce jQuery using the package management system. The package management system (package manager) used this time is "yarn" install.

Terminal

% yarn install

Introduced jQuery

Introduced jQuery, one of the JavaScript libraries

Describe in Gemfile.

Gemfile

gem 'jquery-rails'
#Fill in at the end

Don't forget to install the bundle after writing the gem.

Terminal

% bundle install

After reflecting the gem, restart the server.

Ready to load JavaScript

Create a directory to write JavaScript

Create a file named "javascripts" in the assets folder

:file_folder: app 　　:file_folder: assets 　　　　:file_folder: config 　　　　:file_folder: images 　　　　:file_folder: javascripts 　　　　:file_folder: stylesheets

Create a file that describes JavaScript

Create application.js in javascripts folder

:file_folder: app 　　:file_folder: assets 　　　　:file_folder: config 　　　　:file_folder: images 　　　　:file_folder: javascripts 　　　　　　:page_facing_up:application.js 　　　　:file_folder: stylesheets

Load JavaScript

You need to call the JavaScript file from the view file. Same capacity as css. Added "= javascript_include_tag'application'" to the 9th line.

haml:app/views/layouts/application.html.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Sample app
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application'
    -# = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    -#The line above is a description of a technology called Webpacker. Delete if unnecessary.
  %body
    = yield

Make it possible to call the application.js file.

Write "//= link_directory ../javascripts .js" on the second line.

app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

JavaScript should now be loaded!

Check if JavaScript is loaded normally

Write the following in application.js. Check in the console log.

app/assets/javascripts/application.js

console.log("JavaScript is loaded successfully");

Reload the page It's okay if the console says "JavaScript is loaded successfully".

If you can confirm that it is normal, I wrote it earlier Delete "console.log (" JavaScript is loaded normally ");" in application.js.

Make jQuery available

Add the following two lines to application.js. A description for using the gem mentioned earlier called jquery-rails.

app/assets/javascripts/application.js

//= require jquery
//= require rails-ujs

Loading jQuery ・ ・ ・ // = require jquery Use JavaScript with Rails ... // = require rails-ujs

Remarks

After this, when creating a JavaScript file directly under application.js and writing it Since it will be necessary to read all the JavaScript files in the directory where application.js exists, add "//= require_tree." At the end.

app/assets/javascripts/application.js

//= require jquery
//= require rails-ujs
//= require_tree .

For example, a JavaScript file called sample1.js sample2.js sample3.js If you create it directly under application.js It means that it will read everything in the previous description.

:file_folder: app 　　:file_folder: assets 　　　　:file_folder: config 　　　　:file_folder: images 　　　　:file_folder: javascripts 　　　　　　:page_facing_up: application.js 　　　　　　:page_facing_up: sample1.js 　　　　　　:page_facing_up: sample2.js 　　　　　　:page_facing_up: sample3.js 　　　　:file_folder: stylesheets

Check if jQuery works

Directly under application.js as in the previous example for operation test Only sample1.js actually creates a file. If the name of the file to be created next is decided, that name is fine.

Describe the following in the sample1.js file.

app/assets/javascripts/sample1.js

$(function(){
  console.log("jQuery works correctly")
});

If you can describe it Also, if you reload the page and the console says "jQuery can be used correctly", it is working properly.

If you can confirm it, delete the contents of sample1.js. When using this file, change the name.

Memo When introducing jQuery, I am using the package management system "yarn". It is described in haml.

I would also like to find out what would happen if I didn't use a package management system.

One last word

To implement asynchronous communication I had to load JavaScript and introduce jQuery. JavaScript makes the code simple by using a library called jQuery. The code I wrote above would be quite long without jQuery.

What is the library and what each word is? I also want to understand what a package management system like yarn is doing, so I hope I can look it up again and write an article.

After this, I went into Ajax to implement asynchronous communication. In this way, I made the article as a single introduction because of the expectation that it could be applied to other things. I'm not sure if another implementation can be done from this stage, I wanted to do more.

Related Links

It is [here]([ttps: //kayoblog.org/programming_myapp_hidoukitushin/) that describes all the flow of asynchronous communication from the introduction of jQuery.