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, 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.
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 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
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
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!
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.
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
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
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.
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.
It is [here]([ttps: //kayoblog.org/programming_myapp_hidoukitushin/) that describes all the flow of asynchronous communication from the introduction of jQuery.
Recommended Posts