JQuery Rails stylesheet switcher not working
Question
I have three stylesheets (Sass) that represent "themes" my users can select from. In my navigation, there's a settings tab which contains a list of links where a user can choose one of the "themes". These links are supposed to make a JQuery call that changes the stylesheet.
The problem is this: When the link is clicked, the stylesheet appears to load, but the style on the page remains the same.
This is the code (Rails 4.1.8):
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_self
//= require_tree .
$(document).ready(function() {
$("#themeControl li a").click(function() {
$("link.theme_control").attr("href",$(this).attr('rel'));
return false;
});
});
application.html.erb (head tag)
<head>
<title></title>
<%= stylesheet_link_tag 'tranquil_mountain', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= favicon_link_tag 'my_icon.png' %>
</head>
The above stylesheet_link_tag uses tranquil_mountain.css.sass as the default rendered stylesheet. What I'm trying to do is to use the links in the following code..
_navigation.html.erb - EDIT: Changed "themeControl" to an ID per lunr's suggestion. (Still not working)
<li class="dropdown">
<a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown" role="button" aria-expanded="false">Settings <span class="caret"></span></a>
<ul class="dropdown-menu" id="themeControl" role="menu">
<li><em>Change theme</em></li>
<li><%= link_to "Winter Sunrise", "assets/winter_sunrise.self.css",:class => "theme_control", :remote => true %></li>
<li><%= link_to "Tropical Shores", "assets/tropical_shores.self.css",:class => "theme_control", :remote
=> true %></li>
<li><%= link_to "Tranquil Mountain", "assets/tranquil_mountain.self.css",:class => "theme_control", :remote
=> true %></li>
</ul>
</li>
..to load one of the following stylesheets:
assets/stylesheets/winter_sunrise.css.sass
@import "basic_styles"
$bg_color: #7E99D0
$bg_image: "winter_sunrise_bg.jpg"
@include basic_styles($bg_color, $bg_image)
assets/stylesheets/tropical_shores.css.sass
@import "basic_styles"
$bg_color: #FFF
$bg_image: "tropical_shores_bg.jpg"
@include basic_styles($bg_color, $bg_image)
assets/stylesheets/tranquil_mountain.css.sass
@import "basic_styles"
$bg_color: #175413
$bg_image: "tranquil_mountain_bg.jpg"
@include basic_styles($bg_color, $bg_image)
It would also be nice to store the chosen "theme" in the session, but one step at a time. I just need it to load in the first place . What am I doing wrong? Viewing the console events when the links are clicked, I see this:
GET http://localhost:3000/assets/tranquil_mountain.self.css [HTTP/1.1 304 Not Modified 6ms]
Also, FWIW, when the dropdown link (above) is clicked, the dropdown menu does not retract. I don't know if the 2 problems are related or not.
BTW The above selection list compiles to the following:
<li class="dropdown">
<a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown" role="button" aria-expanded="false">Settings <span class="caret"></span></a>
<ul class="dropdown-menu themeControl" role="menu">
<li><em>Chanage theme</em></li>
<li><a class="theme_control" data-remote="true" href="assets/winter_sunrise.self.css">Winter Sunrise</a></li>
<li><a class="theme_control" data-remote="true" href="assets/tropical_shores.self.css">Tropical Shores</a></li>
<li><a class="theme_control" data-remote="true" href="assets/tranquil_mountain.self.css">Tranquil Mountain</a></li>
</ul>
</li>
I've worked a long time on this one little function and can't get it to work. Tried many variations from tutorials I've found on this and other sites. If this is not enough information or if I'm going about it all wrong, please let me know. I'm up for anything that gets the job done.
Thank you for helping!
1 answers
solution1
1 2015-04-24 02:26:54
Are you sure your click callback is working? Because I think your selector is wrong:
$("#themeControl li a").click
It should be:
$(".themeControl li a").click
Because themeControl is a class, not an id.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.