I'm trying to use Twitter Bootstrap with the 'bootstrap-sass' gem but for some reason, the behavior is absolutely not right.
Judging by a submit button styled with class="btn" like so
<div class="actions btn">
<%= f.submit %>
</div>
The result is that there are the bootstrap styles, but they are overriden by the user-agent rules so that the result is the standard Chrome button that appears on top of the bootstrap one... Here is a link to what I get :
*http://hpics.li/9ddcb61
Also, without changing anything (all I did was try the suggestion in comments and put it back as it was), now things don't float around but are all vertical :
*http://hpics.li/f7605d0
This is what I get in Dev Tools :
*http://hpics.li/db602b0
This is the gem file
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'bootstrap-sass'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
end
I have a custom.css.scss file with this inside :
#import "bootstrap";
#import "_bootstrap-responsive.scss";
I also have tried adding this to the application.css.scss before the require_self and require_tree with no success
*= require _bootstrap
*= require _bootstrap-responsive
This is the js file in case it would be useful
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
I have really no idea what is going on, moreover I did the railstutorial book and everything worked fine when I was on it, but on my own app, nothing works... :(
I'm not sure I gave all information but feel free to request!
It's doing exactly what you're telling it, namely creating a "Bootstrap-styled" button and placing a non-Bootstrap-styled submit button inside it.
Try simply adding the btn class to your submit button:
<%= f.submit , :class => "btn" %>
In bootstrap buttons and button styling requires the javascript part of bootstrap to be load also. You can do this by adding this line:
//= require bootstrap
to your app/assets/javascripts/application.js file above the line
//= require_tree
Related
I am building a relatively new Rails 5 application. I've been using the bootsy gem and I've been experiencing a problem where the wysiwyg will not show on the page until after a page refresh. After playing around for a while, I discovered that if I removed turbolinks from my application.js, the wysiwyg appears first time ( without a page refresh ). Can anyone tell me how I should be requiring turbolinks into my application.js. Thanks in advance.
application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require bootsy
//= require turbolinks
//= require_tree .
application.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootsy";
#import "articles";
gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '5.0.0'
# Use postgresql as the database for Active Record
gem 'pg', '~> 0.15'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-turbolinks'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'simple_form'
gem 'bootstrap-sass'
gem 'bootsy'
I'm using simple_form in combination with bootsy so my form looks something like this:
<%= simple_form_for #article, url: action_path do |f| %>
<%= f.input :title %>
<%= f.input :body, label: "Article Body", as: :bootsy %>
<%= f.submit %>
<% end %>
You need to use the turbolinks:load event like this :
$(document).on('turbolinks:load', ready)
function ready() {
//your code here
}
Your require is fine.
That's it.
So after a bit of playing around I found a solution. I added document.addEventListener('turbolinks:load', Bootsy.init); to my application.js and this solved the issue.
Version Rails 5 beta 3. I am using gem jquery-ui-rails 5.0.5
gemfile
................................................
gem 'jquery-rails'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-ui-rails'
application.js:
//= require turbolinks
//= require jquery
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require jquery.turbolinks
//= require cocoon
//= require jquery_nested_form
//= require jquery-fileupload/basic
application.css
/**
* application.css
*
*= require jquery-ui/datepicker
*= require_self
*= require_tree ./all
freelancers/edit.html.erb
<li class="form-fields__group form-fields__group_birthdate">
<label for="freelancer_birth_date">Birthday</label>
<div class= "field">
<%= f.text_field :birthday %>
</div>
</li>
Table name: freelancers
#
# id :integer not null, primary key
# first_name :string
# last_name :string
# rate :integer
# birthday :date
javascripts/freelancer.coffee
jQuery ->
$('#freelancer_birthday').datepicker()
I click on field birthday, but dont open datepicker. Nothing happens. How can solve this problem? Thank you
I have a Rails 3.1 app that uses the foundation-rails gem and the jquery-rails gem and everything seems to be working. I tried to add the jquery-ui-rails gem to the mix and ran bundle install and everything looks good. Here is the relevant part of my gemfile:
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sqlite3'
gem 'mysql2'
gem 'devise'
gem 'omniauth'
gem 'omniauth-facebook', '1.4.0'
gem 'omniauth-google-oauth2'
gem 'jquery-rails'
gem 'json'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.1.4'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
gem 'foundation-rails'
gem 'jquery-ui-rails'
end
Here is application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require foundation
//= require_tree .
$(function(){ $(document).foundation(); });
Here is application.css:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require foundation_and_overrides
*= require_tree .
*/
/*
*= require jquery.ui.all
*/
I have a page that includes the following code:
<ul id='sortable_list'>
<% #list.items.each do |item| %>
<li><%=item.name%></li>
<%end%>
</ul>
</div>
</div>
<script>
$(function() {
$( "#sortable_list" ).sortable();
$( "#sortable_list" ).disableSelection();
});
</script>
The list is not sortable when the page loads and I get a "Uncaught ReferenceError: $ is not defined". I'm at my wits end - help, please!
OK, so the issue was the current version of Foundation (5.0.2). The documentation says that its script tag should be placed right before the closing tag. I put my script_tag for application.js there and, apparently, jQuery likes to be loaded in the head. So I moved //= require foundation out of application.js, moved <%= javascript_include_tag "application" %> back to the head, and added <%= javascript_include_tag "foundation" %> by itself at the bottom of the document. I figure this will work until they fix the bug in 5.0.2 that requires that it be loaded at the end of the body.
I'm new to jQuery UI, but I can't figure out why this isn't working.
I have a simple accordion, and I'm trying to get the icons to show up. Here is my CoffeeScript:
$ ->
$( '#accordion' ).accordion
collapsible: true
heightStyle: "content"
icons:
header: "ui-icon-triangle-1-e"
activeHeader: "ui-icon-triangle-1-s"
In my application.js file I'm already including the follwing:
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
EDIT 1:
Relevant part of Gemfile
gem 'rails', '3.2.12'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'
gem 'jquery-ui-rails'
Ok, I have tried jquery ui accordion and everything is ok.
simple-jquery-ui-accordion rails 3.2.13
$ ->
$( '#accordion' ).accordion
collapsible: true
heightStyle: "content"
icons:
header: "ui-icon-arrowthick-1-e"
activeHeader: "ui-icon-arrowthick-1-s"
I think the issue on your views or you forgot to include *= require jquery.ui.all on application.css
*= require_self
*= require jquery.ui.all
*= require_tree .
Make sure everything your script is correct
Is Header and activeHeader suppose to be a value for the icons key?
From the example: http://api.jqueryui.com/accordion/#option-icons
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );
it looks like it 's a different argument.
which should look more like this
$(".selector").accordion "option", "icons",
header: "ui-icon-plus"
activeHeader: "ui-icon-minus"
I added the best_in_place gem to my project and the update does NOT take effect until a page reload has happened. I can see it flash in my show view but it requires a page reload. Why is this?
My Lists controller:
respond_to :html, :xml, :js
def update
#list = List.find(params[:id])
#list.update_attributes(params[:list])
respond_with(#list, :location => list_url(#list))
end
My Lists show view-
<h2 class="page-header"><%= best_in_place #list, :name %></h2>
<h2 class="lead"><%= best_in_place #list, :description %></h2>
My gemfile-
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'best_in_place'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'jquery-ui-rails'
gem 'uglifier', '>= 1.0.3'
end
My application js manifest -
//= require jquery
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require justgage
//= require raphael.min
//= require jquery.purr
//= require best_in_place
//= require_tree .
My lists coffee-
jQuery ->
$('#task_due_date').datepicker
dateFormat: 'mm/dd/yy'
jQuery ->
$('.best_in_place').best_in_place()
Could it be the order of my manifest js files? What am I overlooking here to get the update to take without a page reload? Thanks for your attention.
I simply forgot to add the respond_to :json at the top of my lists controller. Thanks to those that took a look.