0

PROBLEM:

Bootstrap Switch does not toggle in certain browsers, and only loads when the page is reloaded, not on first visit. (Do I need to have this as 2 separate questions?)

EXPLANATION:

I have been researching this and finally figured out why the event switch wasn't being triggered. But, the switch still does not show up when a user first navigates to the page. They have to reload the page for the switch to show up. Also, the switch works normally in Chrome but not Safari nor Firefox. (As seen in this video: Video Showing malfunction

VERSIONS:

Ruby: 2.2.1p85 (2015-02-26 revision 49769) [x86_64-darwin14]

Rails: 4.2.0

Gem: bootstrap-switch-rails 3.3.3

Safari: 8.0.8 (10600.8.9)

Firefox: 24.0 (I do notice that this is a very old version as 40.0.2 is their current release)

Chrome: 45.0.2454.93 (64-bit)

MY CODE:

Gemfile

gem 'bootstrap-switch-rails', '~> 3.3.3'

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
//= require bootstrap-switch

app/assets/stylesheets/application.css

/*
*= require_tree .
*= require_self
*= require bootstrap3-switch
*= require rails_bootstrap_forms
*/

This code is added in the <head> information within the following page:

app/views/layouts/_header.html.erb

<script type="text/javascript">
    $(document).ready(function() {
        $('input:checkbox').bootstrapSwitch();
    });
</script>

This information is on the page itself

app/views/devise/registrations/edit.html.erb

<div class="col-md-3">
    <%= f.label :private, "Private" %>
    <%= f.check_box :private, :data => { :size => 'large', 'on-color'=>'success', 'on-text'=>'On', 'off-text'=>'Off', 'animate'=>'true'}, :label=>'This sets your profile to be hidden from searches' %>
</div>

QUESTIONS:

1) Why doesn't the switch load on initial visit and only on reloading the page?

2) Why does the switch only work correctly in Chrome and not in Safari nor Firefox?

Christopher Warrington
  • 747
  • 1
  • 8
  • 22

1 Answers1

0

After researching the first part of my question (Why doesn't the switch load on initial visit and only on reloading the page?), I came up with the following answer, which also solved the second question (Why does the switch only work correctly in Chrome and not in Safari nor Firefox?)

I found a question on StackOverflow (Jquery gets loaded only on page refresh in rails 4 application), and the answer provided by @Ian solved both of my issues.

Solution:

@Ian suggested using a gem called jquery-turbolinks.

Code

Here is the code I added/changed (I followed the instructions on the gem's github page).

Gemfile (Added the following line):

gem 'jquery-turbolinks'

app/assets/javascripts/application.js (I added this line):

//= require jquery.turbolinks

and changed the order of my assets to look like this: 

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require_tree .
//= require bootstrap-sprockets
//= require bootstrap-switch
//= require turbolinks

Explanation:

So, the reason that the switch was not showing up unless the page was being refreshed, is due to the turbolinks function. This calls for the information on a page through AJAX without reloading the CSS and JQuery. This makes page load times faster and is a good function to have; but, can cause issues like I was seeing where a necessary JQuery wasn't being called on an initial page load.

This gem (jquery-turbolinks) solves the problem by calling the JQuery but still using turbolinks. So, on the initial load of my profile edit page, the switch shows up.

Now, it must have also been an issue of the JQuery not loading correctly, even on a refresh of the page, which was causing the switch to be buggy. Now that the scripts are all running correctly, the switch acts correctly in Safari, Chrome and Firefox. So, both problems solved!

Community
  • 1
  • 1
Christopher Warrington
  • 747
  • 1
  • 8
  • 22