This is the first post, so please be kind to me.
Ruby 2.6.5 Rails 6.0.3.2
When creating an application with Rails, the behavior sometimes did not go well when the page was changed.
I myself am quite clogged up, so I will leave it as a memorandum. Also, I would like to be able to give as much as possible to people who are similarly clogged.
Provide information that will give you a hint to those who are having trouble loading the page for the first time. Consider loading a page when using turbolinks.
The first load of a page does not work when using Rails turbolinks.
・ What is turbolinks? Gem introduced by default from Rails 4.0 ・ Turbolinks is a library that speeds up screen transitions (not updating the entire screen, but updating only a part of the screen) -JavaScript may not work properly due to turbolinks
① The HTML of the page is loaded (2) Load the CSS and JavaScript referenced in the page ③ Render the page (display the page based on the information)
If multiple CSS and JS files exist in step (2), multiple communications will be performed between the browser and the Web server, and the communication speed will slow down.
That's where the "asset pipeline" framework came in (since Rails 3.0). The asset pipeline is a mechanism that "concatenates and compresses JavaScript, CSS, and image files that you want to use in a Ruby on Rails application into one file while making development work easier."
This asset pipeline has reduced communication between the browser and the server.
And new additions to the asset pipeline from Rails 4.0 are "turboliks".
"Turbolinks" extracts only the "title" and "body" of the current page and converts them to the new HTML "title" and "body" when the page transitions. This eliminates the need for the browser to reacquire CSS and JavaScript, which speeds up the process.
If you use turbolinks, JavaScript that starts from page load will not work.
Normally, the load event occurs when the page is loaded. However, the load event does not occur when the screen is switched by turbolinks.
Therefore, in the following description, make it work by first loading, reloading, and page switching (first choice).
$(document).on('turbolinks:load', ()=> {
Let's look at an example.
$(document).on('turbolinks:load', ()=> {
$('#image-box').on('change', '.js-file', function(e) {
//Determine if this has a compilation class with the hasClass method
const conpilation = $(this).hasClass('conpilation');
if (!conpilation) {
//Make an input using the first number of fileIndex(.append appends a tag at the end of the element)
$('#image-box').append(buildFileField(fileIndex[0]));
//Here`item_images_attributes_${fileIndex[0]}_image`)And const html id="item_images_attributes_${index}_image">Is OK if they are together
$('.ListingMain__entire__menu__list__field__display__content').attr('for', `item_images_attributes_${fileIndex[0]}_image`)
// shift()The method removes the first element from the array and returns that element. This method changes the length of the array.
fileIndex.shift();
//Add 1 to the last number(.push is a method for adding a new element to the end of an array)
fileIndex.push(fileIndex[fileIndex.length - 1] + 1);
} else {
return false;
}
});
});
This should work! !! !! I was surprised, but the behavior becomes strange only when loading for the first time.
Try to fire when the screen loads.
$(document).on('ready page:load', ()=> {
But even this doesn't work. ..
If this doesn't work, there's nothing you can do about it.
= link_to new_item_path, class: "Sell__listing", data: {"turbolinks" => false} do
In conclusion, the above description now works fine the first time the page loads.
data: {"turbolinks" => false}
This description is the point. With this, turbolinks can be turned off only for the transition destination page.
From Rails 6.0 and later versions, a gem called Webpacker is introduced as standard. Webpack is a framework for managing various JavaScripts required when creating a web application. Modern web application development uses various JavaSctipt libraries, which manage their dependencies (module bundler).
Webpacker In Rails so far, the asset pipeline was used to manage JavaScript etc. However, as the JavaScript library has been enhanced, the policy of using Webpack is being changed from Rails 6.0 or later.
This time, I used jQuery, so there was no problem implementing it in the asset pipeline. In the future, you may use Webpacker. However, it seems that Webpack can be installed in Rails applications without using Webpacker. There is still a lack of study in this area, so I am thinking of continuing my studies.
If you are using Rails 4.0 or later and the page does not load well, you may be able to implement it well by considering the above.
reference: https://qiita.com/hiroyayamamo/items/b258acbaa089d9482c8a https://www.ryotaku.com/entry/2019/01/15/213420
We hope you find this article useful. From now on, I would like to share what I have learned so that I can give as much as possible. Thank you.
Recommended Posts