I am trying to implement toggle switches from http://www.bootstraptoggle.com/.
gem 'rails-bootstrap-toggle-buttons'
bundle
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-toggle-buttons
//= require turbolinks
//= require_tree .
and
*= require bootstrap-toggle-buttons
*= require_tree .
*= require_self
*/
view:
<%= f.check_box :email_notifications, :'data-toggle'=>"toggle" %>
Is just giving me a plain checkbox. Any clues on why this would not be working?
First: you wanted to have the toggle switches from http://www.bootstraptoggle.com/ but from what I see the rails-bootstrap-toggle-buttons gem seems to contain the toggle switches from http://www.bootstrap-switch.org/. This could have been your issue since the latter does not support initialization via the HTML data-toggle attribute.
Since I also wanted to use the former library due to performance issues with the latter and did not find a gem which shipped it through the asset pipeline I created one: bootstrap-toggle-rails. You can find the documentation in the README.
But: the data-toggle initialization method also didn't work for me in combination with Turbolinks, but you can make it work by just initializing it manually with JavaScript and skip the data-toggle attribute and e.g. add a toggle class:
$(document).on('ready page:change', function() {
$('input[type="checkbox"].toggle').bootstrapToggle(); // assumes the checkboxes have the class "toggle"
});
Note the page:change event, which is fired by Turbolinks, in addition to the ready event.
If you're using >Rails 4 and >Ruby 1.9
<%= f.check_box :email_notifications, :data => { :toggle => 'toggle' } %>
Make sure that your HTML is being generated correctly.
<!-- Something like this -->
<input type="checkbox" name="email_notifications" data-toggle="toggle">
Then check the JavaScript console to make sure there are no errors.
And if you want to add style, simple do like:
<%= f.check_box :subscribed_to_news, data: { toggle: 'toggle', style: 'ios' } %>
Related
Im following a tutorial on writing a marionette app in coffeescript with rails. Namely Brian Mann's Backbonerails tutorials if you are familiar with these. My global app object is not available on the window when I inspect with firebug.
My app.js.coffee
console.log #
#App = do (Backbone, Marionette) ->
App = new Marionette.Application
App.addRegions
headerRegion: "#header-region"
mainRegion: "#main-region"
footerRegion: "footer-region"
App.on "initialize:after", ->
if Backbone.history
Backbone.history.start()
App
my index.html.erb
<div id="header-region"></div>
<div id="main-region"></div>
<div id="footer-region"></div>
<%= javascript_tag do %>
$(function() {
App.start();
});
<% end %>
For the life of me I dont understand why I can console.log # and receive a reference to the window object, but my App object is not attached to the window. Also receive reference error in console for App reference in index.html.erb
my application.js manifest file
//= require jquery
//= require lib/underscore
//= require lib/backbone
//= require lib/marionette
**//= require backbone/app**
//= require_tree ./backbone/apps
When in responsive mode, bootstrap dropdown works on intial page visit/refresh but when another page is visited (via the dropdown link or any page link) it drops down but doesn't go back up. This happens when the <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> is placed at the bottom of the body tag. Everything works fine when the javascript tag is moved to the head but this is not best practice as regards js files and DOM load. My bootstrap files are added manually and not with a gem. Why is this happening this way? Is there something I am missing?
Here is my application.js file arrangement
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
It's because of turbolinks.
Try "data-no-turbolink"
%ul.dropdown-menu{:role => 'menu', :'aria-labeledby' => "something", "data-no-turbolink" => true}
I am using Best In Place gem 3.03.
My view Page code:
<div class="container">
<h3> Name</h3>
<%= best_in_place #contact, :first_name %>
</div>
My coffee script :
users.coffee
jQuery ->
$('.best_in_place').best_in_place()
The First Name is coming as Mark or any Name that is in the Database but when I click it the input field is not displaying allowing me to edit the text.
application.js
//= require jquery
//= require jquery_ujs
//= require dropzone
//= require jquery.purr
//= require best_in_place
//= require best_in_place.purr
//= require_tree .
I found the Issue looks like I was including the jquery script twice one in application.js and once using javascript include tag.
Now I have used couple of hours to integrate rails work together with angular, and I am about to give up. I am following this tutorial:
link to tutorial
'
and I made it even simpler
In my application.js I require the following :
//= require jquery
//= require jquery_ujs
//= require angular
in my main.js.coffe I ask to get the following js files :
#= require_self
#= require_tree ./controllers/main
and in my app/assets/javascripts/controllers/main/mainIndexCtrl.js.cofee I have the same lines as he does in tutorial :
#IndexCtrl = ($scope) ->
$scope.title = "My blog"
So here is the funny part :
my "Master" view is exactly the same as in tutorial :
<!DOCTYPE html>
<html ng-app>
<head>
<title>Blog</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application", controller_name %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
So in theory when I run my app at http://localhost:3000/main/Index I should get the exact same result as he does, but no.
I am getting Runtime error, which says that it has failed at (in /app/assets/javascripts/main.js.coffee) and nothing else. I really can't figure out what exactly is going wrong. If I switch controller_name with some random string like 'hugabuga' page loads and of course angular wont work because there are no link to the controller Index.
I am not very experienced with cofee script, but maybe the way controller is defined is not correct?
In another tutorial I had to add another Gem
gem 'angular-rails-templates'
And also amend the application.js to include:
//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require angular-route/angular-route
//= require angular-rails-templates
//= require_tree .
The order that the JS is listed is also important. Make sure you have the same in your file as what is shown in the video.
Im trying to make basic structure of my project to work out. In my "Master" file i have a line which call main.js.coffee script file:
<%= javascript_include_tag "application", 'main' %>
in my main i have call to the next js files :
#= require_self
#= require_tree ./controllers/main/
./controllers/main/ contains just 1 single file mainIndexCtrl.js.coffee
so here is the structure:
So on call of url:port/main/index application.html.erb is called which call to main.js.coffee which than call to mainIndexCtrl.js.coffee, or more like that what i think it does, because doesnt matter what i do i cant get rid of folowing error:
I am VERY new to Rails, so basicly i really dont know what to do because this error doesnt exactly saying anything to me.
Main.js.coffee :
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
#= require_self
#= require_tree ./controllers/main/
application.js
//= require jquery
//= require jquery_ujs
//= require angular
There is an error in your main.js.coffe file. Either correct the syntax/code error in the file or remove it from your javascript_include_tag (like: <%= javascript_include_tag "application" %>) Also, it would make sense to include this file in your application.js, if it is to be used, to take full advantage of the asset pipeline....