Hey, I encountered a strange issue.
After clicking on the three pages displayed in the images below:
Step 1 controller welcome
Step 2 other controllers
Step 3, back to step 1 view controller welcome
The final image,
when returning to controller welcome
from other controllers
,
going from step 2 to step 3.
The browser cached the stylesheets,
The layout of step 3 is different from step 1.
Even though they are the same page, it seems like the browser is caching the CSS files?
I added two assets folders used by the two layouts in application.rb
:
config.assets.paths << "#{Rails.root}/vendor/themes"
themes
├── ace-admin-theme
│ ├── avatars
│ ├── css
│ ├── font
│ ├── images
│ ├── img
│ └── js
└── lenord-single-page-theme
├── css
├── fonts
├── img
├── index.html
├── js
└── rs-assets
Added the welcome.html.haml
under layouts folder so that welcome_controller
can load this layout
layouts
├── _header.html.haml
├── application.html.haml
└── welcome.html.haml
All the source code can be found here: https://gist.github.com/poc7667/0198b973fce0fbf4dd26
Page A : OK Page B : OK Page A : Failed, the Page B's stylesheets are cached, it should be identical to original page A
Disabling the data-turbolinks-track
for the CSS did not work
The peculiar issue still persists.
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -2,7 +2,7 @@
%html
%head
%title VIVOTEK DQA DEVELOPER
- = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
+ = stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application", "data-turbolinks-track" => true
/ Description, Keywords and Author
/ basic styles
diff --git a/app/views/layouts/welcome.html.haml b/app/views/layouts/welcome.html.haml
index 28d9c99..c3e6ec8 100644
--- a/app/views/layouts/welcome.html.haml
+++ b/app/views/layouts/welcome.html.haml
@@ -2,7 +2,7 @@
%html
%head
%title VIVOTEK DQA DEVELOPER
- = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
+ = stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application", "data-turbolinks-track" => true
Inspecting with Firebug, I noticed the CSS files being included, I realized I had to reload the page to load the expected CSS files. How can this be fixed?
Update
Upon reloading the page, the console displayed that the CSS files were loaded
Started GET "/assets/ace-admin-theme/css/bootstrap.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
Started GET "/assets/ace-admin-theme/css/font-awesome.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
However, when clicking on a hyperlink (via URL helper) to other pages, the CSS does not load again.
It should actually reload the CSS files because some controllers use a different layout and assets.
What's even worse is that clicking the link generated by URLhelper leads to the problem
But manually typing the URL in the browser works fine!!
In short, the CSS files only load the first time, and additional required CSS files (for other layouts) will not load anymore (when viewing via URLHelperLink), but manual entry of the URL in the browser (for example: localhost:3000/welcome, localhost:3000/urlcommands) works as intended.