Update (26 February 2015):
jPushMenu.js had a handler that was making a e.preventDefault() call. If I removed this one line event handler, I stopped seeing the bad behavior. jPushMenu also has a new version of their code out now that does not use this e.preventDefault() call, which also fixes my issue. The question is below for anyone that runs into a similar problem, but likely not as their is a new version.
Question:
I'm having trouble with a link that I specify the method: :delete for in the link_to helper like this:
<li>
<%= link_to raw('<span class="glyphicon glyphicon-off"></span> Sign out'),
signout_path,
method: :delete %>
</li>
Even though I specify the method: :delete like above, and the rendered HTML does include the data-method="delete" attribute, clicking the link issues a GET request.
This has never been an issue up until I added the following file to my app/assets/javascripts/ directory: jPushMenu.js. As you can see below, I'm including this file through the application javascript manifest file with the line //= require_tree .. Basically, my signout link broke as soon as I added a different, mobile friendly bootstrap-styled navbar.
I would really like to find out how to make the push menu navbar work while also allowing my signout link to work as it did before, but I don't know what else I'm missing here. One thing I'm afraid of is that I have so many javascript files that something might be stomping over the other and maybe the order in which I load them in matters finally? Does anyone else have any ideas why this may be the case?
In regards to other StackOverflow questions that are similar:
You'll notice that my link is in a <li>...</li> tag. This is because this link appears in a bootstrap styled dropdown in my nav header object. Other StackOverflow questions (the majority of them I could find actually) suggest that using a button_to helper rather than a link_to helper will solve the problem. And it definitely works. But now I have an odd looking button in my dropdown and all the bootstrap styling is ignoring this part of the dropdown because it is looking for an <a> tag, not an <button style="button"> tag.
More directed question: Where would be a good place to debug this? If Rails handles the data-method attribute and uses javascript to issue a DELETE request, what part of the application code can I put a breakpoint?
(below are files and output that you may or may not want to look at...)
application.js:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require autocomplete-rails
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require moment
//= require bootstrap-datetimepicker
//= require bootstrap-select
//= require bootstrap-tokenfield
//= require underscore
//= require gmaps/google
//= require fullcalendar
//= require fullcalendar/gcal
//= require_tree .
...
Gemfile:
source 'https://rubygems.org'
ruby '2.1.2'
gem 'rails'
gem 'bootstrap-sass'
gem 'sass-rails', '~> 4.0.0'
gem 'autoprefixer-rails'
gem 'bootstrap_form'
gem 'bcrypt-ruby'
gem 'faker', '1.1.2'
gem 'will_paginate'
gem 'bootstrap-will_paginate'
gem 'state_machine'
gem 'twitter_cldr'
gem 'pg'
gem 'figaro'
gem 'jquery-turbolinks'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jbuilder'
gem 'mail_form'
gem 'ransack'
gem 'momentjs-rails'
gem 'bootstrap3-datetimepicker-rails'
gem 'date_validator'
gem 'gmaps4rails'
gem 'geocoder'
gem 'bootstrap-select-rails'
gem 'fullcalendar-rails'
gem 'wepay'
gem 'omnicontacts', '~> 0.3.5', git: 'git://github.com/Diego81/omnicontacts.git'
gem 'rails4-autocomplete'
gem 'paperclip'
gem 'aws-s3'
gem 'aws-sdk'
gem 'mail'
gem 'mailboxer'
gem 'bootstrap_tokenfield_rails'
group :development, :test do
gem 'better_errors'
gem 'binding_of_caller'
gem 'rspec-rails', '2.14.0'
gem 'guard-rspec', '2.5.0'
gem 'meta_request'
end
group :test do
gem 'selenium-webdriver', '2.35.1'
gem 'capybara', '2.1.0'
gem 'factory_girl_rails', '4.2.1'
end
group :doc do
gem 'sdoc', '0.3.20', require: false
end
group :production do
gem 'rails_12factor'
end
routes.rb
...
match '/signout', to: 'sessions#destroy', via: 'delete'
...
Output of rake routes
...
sessions POST /sessions(.:format) sessions#create
new_session GET /sessions/new(.:format) sessions#new
session DELETE /sessions/:id(.:format) sessions#destroy
...
jPushMenu.js had a handler that was making a e.preventDefault() call. If I removed this one line event handler, I stopped seeing the bad behavior. jPushMenu also has a new version of their code out now that does not use this e.preventDefault() call, which also fixes my issue. The question is below for anyone that runs into a similar problem, but likely not as their is a new version.
Related
couldn't find file 'jquery-ui/datepicker' with type 'application/javascript'
Checked in these paths:
/Users/jsbae/Desktop/unisports/app/assets/config
/Users/jsbae/Desktop/unisports/app/assets/images
/Users/jsbae/Desktop/unisports/app/assets/javascripts
/Users/jsbae/Desktop/unisports/app/assets/stylesheets
/Users/jsbae/Desktop/unisports/vendor/assets/javascripts
/Users/jsbae/Desktop/unisports/vendor/assets/stylesheets
This is what is happening when I try to run the rails server. I have checked my gem list and can see I have:
jquery-rails (4.2.2, 4.2.1)
jquery-turbolinks (2.1.0)
jquery-ui-rails (6.0.1, 5.0.5)
jqueryui_rails (0.0.4)
I have seen a lot of posts on problems with the versions, so I also tried to downgrade jquery-rails and jquery-ui-rails, but when running the commands such as:
gem install 'jquery-rails','~>2.3.0' OR gem install 'jquery-ui-rails', '~> 4.2.1'
But they constantly send me errors like:
ERROR: Could not find a valid gem 'jquery-rails-2.3.0' (>= 0) in any repository
ERROR: Possible alternatives: jquery_rails3, jquery-rails, jquery-rails-cdn, jquery-rails_vho, jquery-rails-aristo
I have also tried editing the application.js and application.css files with
*= require jquery-ui' & '//= require jquery-ui
You need to specify jquery-rails or jquery-ui-rails in the Gemfile
gem 'jquery-rails'
# gem 'jquery-ui-rails'
The easy way to solve your problem is:
Download jquery-ui from http://jqueryui.com/download/
Exact and copy jquery-ui.min.js to app/assets/javascripts/ and jquery-ui.min.css to app/assets/stylesheets/
In application.js and application.css, make sure that you have this line:
//= require_tree . and *= require_tree .
My pages are being loaded twice (the first time is pretty fast btw). Besides that, I must refresh the page to have my js working.
application.html.erb
<head>
<title><%= content_for?(:title) ? yield(:title) : "ASC Engenharia e Construções" %> </title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require fancybox
//= require flash.js
//= require acompanhamento.js
//= require controle_de_obras.js.coffee
//= require documentos.js.coffee
//= require funcionarios.coffee
//= require galeria.coffee
//= require turbolinks
I've already executed rails assets:clean. Have already deleted public/asstets directory and have checked that it is not chrome bug.
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.4'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# 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
gem "font-awesome-rails"
gem 'bootstrap-sass', '~> 3.3.6'
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jquery-datatables-rails', git: 'git://github.com/rweng/jquery-datatables-rails.git'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks', '~> 5.0.0'
gem 'jquery-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 'devise', '~> 3.4.1'
gem "paperclip", "~> 5.0.0"
gem 'fancybox2-rails', '~> 0.2.8'
gem "rails_admin"
gem "prawn"
gem 'prawn-table', '~> 0.1.0'
gem "rails_admin_import", "~> 2.0"
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
You require everything with //= require_tree ., and on top of that you require all the ones above twice. Get rid of the last line and require all your js files manually. Hope this helps!
// load jQuery, turbolinks, and ujs
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
// load all scripts
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require bootstrap-sprockets
//= require fancybox
// load turbolinks
//= require turbolinks
// get rid of this line
//= require_tree . <-- this line requires all js files
Either of these two options are "guaranteed to work" as per the docs, reference provided below:
$(document).ready(function () { /* ... */ });
or
$(function () { /* ... */ });
To read more the documentation is here
I am trying to get bootstrap javascript working in my rails 4 app.
I asked these questions but haven't been able to get any help.
https://stackoverflow.com/questions/33685338/rails-with-bootstrap-tabs
https://stackoverflow.com/questions/33852687/rails-4-bootstrap-date-picker
I am increasingly feeling defeated by this challenge. It's depressing that bootstrap is described as a simple tool for rails. I would be happy to pay USD100 if someone could help be solve this problem.
My problem is specifically with the javascript functions. My tabs don't work. When you click the link, nothing happens. Also, the date picker doesn't work (I was expecting a calendar to pick a date in a single click).
In my gem file I have:
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'
gem 'jquery-rails'
In my application.html.erb, I have:
<link href='http://fonts.googleapis.com/css?family=Quicksand|Roboto:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="p:domain_verify" content="44c82789b3dcecac427e4b65123fb68d"/>
<title><%= content_for?(:title) ? yield(:title) : "RE" %></title>
<meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Ae" %>">
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
<%= javascript_include_tag "application", "data-turbolinks-track" => false %>
<%= csrf_meta_tags %>
<%= favicon_link_tag %>
<script src="https://www.google.com/jsapi"></script>
<script src="https://www.youtube.com/iframe_api"></script>
Turbolinks is off because i use olark.
In my stylesheets folder, I have files called:
application.css.scss:
*= require_framework_and_overrides.css.scss
*= require bootstrap-datepicker
*= require_self
*= require_tree .
*/
Following comments set out below, I changed this file to be named application.scss and changed the order and referencing to:
*= require_tree .
*= require_self
*= require framework_and_overrides.css.scss
*= require bootstrap-datepicker
*/
framework_and_overrides.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
#import "bootstrap-slider";
In my javascript folder, I have a file called:
application.js:
//= require jquery
//= require jquery_ujs
//= require underscore
//= require gmaps/google
//= require bootstrap-slider
//= require bootstrap-sprockets
//= require bootstrap-datepicker
//= require_tree .
project_dates.coffee.js
$(document).on "focus", "[data-behaviour~='datepicker']", (e) ->
- $(this).datepicker
- format: "dd-mm-yyyy"
- weekStart: 1
- autoclose: true
Then, In my view I am trying to use bootstrap tabs, so that clicking on a tab renders a partial beneath the links bar:
<div class="containerfluid">
<div class="row" style="margin-top:50px">
<div class="col-xs-10 col-xs-offset-1">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"> Terms</li>
<li role="presentation"> Privacy</li>
<li role="presentation"> Licence</li>
<li role="presentation"> Trust</li>
<li role="presentation"> Reliance</li>
<li role="presentation"> Pricing</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="intpolmin" style="margin-top: 50px; margin-bottom: 30px">
We give meaning to other words used in these terms and policies throughout, and identify those words as having an ascribed meaning, with <em>emphasised</em> text.
</div>
</div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="terms"><%= render 'pages/legalpolicies/terms' %></div>
<div role="tabpanel" class="tab-pane" id="privacy"><%= render 'pages/legalpolicies/privacy' %></div>
<div role="tabpanel" class="tab-pane" id="licence"><%= render 'pages/legalpolicies/licence' %></div>
<div role="tabpanel" class="tab-pane" id="trust"><%= render 'pages/legalpolicies/trust' %></div>
<div role="tabpanel" class="tab-pane" id="reliance"><%= render 'pages/legalpolicies/reliance' %></div>
<div role="tabpanel" class="tab-pane" id="pricing"><%= render 'pages/legalpolicies/pricing' %></div>
</div>
</div>
</div>
</div>
Nothing at all happens when you click on the links.
In my project dates form, I have this form field:
<%= f.date_select :start_date, :label => "When does this project begin?", 'data-behaviour' => 'datepicker', order: [:day, :month, :year] %>
It does not make a date picker. Instead it's just three separate fields for d/m/y. Also, the label doesn't display -but I can work around that problem.
Is there something wrong with my setup?
When I change my application.js to remove:
//= require bootstrap
Then the js works so that when you click one of the tab links across the top, it jumps down a long page of text to the point where the relevant text starts. That's not what I want. I want to click on the tab link and for that to cause the relevant partial to render beneath the links (and all of the other partials not to render).
There are no changes to the date picker problem that result from this change to the application.js
When I try adding:
Bundler.require(:default, Rails.env)
to my config/application.rb (as per this post Bootstrap-sass gem Javascript not Working in Rails 4)
I get no different result to the problems outlined above
When I try adding
//= require bootstrap-sprockets
to my application.js (after jquery), the js stops working - so that when i click the link in the tabs menu, nothing at all happens
I am aware the user guide for https://github.com/twbs/bootstrap-sass says:
bootstrap-sprockets and bootstrap should not both be included in application.js.
For that reason, I removed bootstrap from my application.js.
I am also aware that the user guid for that gem says:
Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.
I still have this in my application.css.scss:
*= require_framework_and_overrides.css.scss
*= require bootstrap-datepicker
*= require_self
*= require_tree .
*/
I read the gem documentation as meaning I am doing something wrong by keeping these require files in my css - but the gem documentation doesnt tell you what to use instead.
It says:
Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use #import to import Sass files.
How do you do this?
Entire gem file is copied below:
source 'https://rubygems.org'
# ------------------ Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.4'
# ------------------ Use postgresql as the database for Active Record
gem 'pg'
# ------------------ Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'
# ------------------ 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'
# ------------------ 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
# ------------------ Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'
# ------------------ Use Unicorn as the app server
# gem 'unicorn'
# ------------------ Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# ----------- USERS
# ------------------ authentication
gem 'devise', '3.4.1'
gem 'devise_zxcvbn'
gem 'omniauth'
gem 'omniauth-oauth2', '1.3.1'
gem 'omniauth-google-oauth2'
gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'omniauth-linkedin-oauth2'
gem 'google-api-client', require: 'google/api_client'
# gem 'oauth2'
# ------------------ authorisation
gem 'pundit'
# ------------------ user roles
# ------------------ messaging
# ------------------ money
gem 'money-rails'
# ----------- CONTENT
gem 'state_machine'
gem 'acts_as_approvable'
# ------------------ file uploads
gem 'carrierwave'
gem 'mini_magick'
gem 'simple_form'
# ------------------ video
gem 'yt', '~> 0.25.5'
gem 'vimeo'
# ------------------ organisation
gem 'acts-as-taggable-on', '~> 3.4'
# ------------------ search
# ----------- OTHER
# ------------------ security
gem 'figaro'
# ------------------ performance
gem 'rails-observers'
gem 'high_voltage', '~> 2.4.0'
# ------------------ location
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
gem 'country_select'
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
group :production do
gem "rails_12factor"
end
ruby "2.2.2"
Watching this video - https://gorails.com/episodes/styling-with-bootstrap-sass
The setup appears super simple, but this tutorial does not amend the file to remove references to require as the gem documentation suggests (but which I have not done) but this tutorial still works to get bootstrap working. Is there ANYTHING anyone can see that I might try? On the brink...
As you can see - I have been trying at this for more than a year. I've been to monthly meet ups, paid code mentors and hired contractors who haven't been able to help. Hoping for a miracle on this board.
Bootstrap Sass with Rails 4
TRYING RESCUE SOLUTION BELOW:
So, I now have:
stylesheets as follows:
application.css
*= require_tree .
*= require_self
*/
custom.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
framework_and_overrides.css.scss:
#import "font-awesome-sprockets";
#import "font-awesome";
#import "bootstrap-slider";
javascript files as follows:
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
application.html.erb:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
<%= javascript_include_tag "application", media: 'all', "data-turbolinks-track" => false %>
gemfile:
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'
When I save all of this and complete the suggested steps, there is no change to the above. I click a link in the tab links across the top, the little box at the bottom of the screen says 'go to #[name of link tab] on this page, but nothing happens.
You are in configuration hell, and I have built a minimal working product to get you out of there. In order to achieve this, we tackle your problems in order of their appearance and do not try to solve them in parallel. This answer focuses on your first question and probably solves the others.
The copy of the project's Readme follows. In case you need access to the product, just let me know.
README
This is a demo application to help stackoverflowuser "user2860931" with issues
as mentioned here.
Questions are listed in chronological order:
[Q1] November, 13
Rails with Bootstrap Tabs
[Q2] November, 22
Rails 4 - Bootstrap date picker
[Q3] November, 24
Rails - Bootstrap setup
Problem Description
Many configuration attempts have been made and a suboptimal development
environment probably interrupted rails naming conventions by adding file
extensions.
Versions Used
Rails 4.2.5
Steps To Create This Application By Yourself
First check for an appropriate rails version
$ rails --version
Make sure the development environment (IDE) does not add file extensions by itself
Creating a new rails application
$ rails new rescue
Locate the Gemfile of the application created under 1. and comment out
the turbolinks gem entry
Remove explanatory links for visual clarity
Add the following lines to you Gemfile (one might want to fix gems to a
particular version in order to avoid an application to stop working by an
unplanned update, but this is another issue)
gem 'bootstrap-sass' #, '3.3.5.1'
Run
$ bundle exec bundle update
$ bundle exec bundle install
Create the file app/assets/stylesheets/custom.css.scss and add the following
lines:
#import "bootstrap-sprockets";
#import "bootstrap";
Add the following line to app/assets/javascripts/application.js
//= require bootstrap
IMPORTANT: This line has to follow the lines of jquery and jquery-ujs and
before the require_tree directive so that the resulting file looks like:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
NOTE: We have deleted the line for turbolinks, to reflect the production
system's setup of user "user2860931" (stackoverflow).
After saving all edited files, check whether the development environment
has altered the file extensions (just to be sure this time)
.
├── app
│ ├── assets
│ │ ├── images
│ │ ├── javascripts
│ │ │ └──application.js
│ │ └── stylesheets
│ │ ├── application.css
│ │ └── custom.css.scss
Generate a minimal controller together with action and related view
$ rails generate controller planets index
Start the server
$ rails s
Visit in your browser
http://localhost:3000/planets/index
Last step to remove turbolinks completely
View the HTML sourcecode of the site mentioned under 11.
From file app/views/layouts/application.html.erb remove all
data-turbolinks-track attributes so that the ERB code looks like:
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
Repeat step 1. and note the difference
Visit the file app/views/planets/index.html.erb and replace with your HTML
as listed in [Q1]
This setup renders your partials under the correct tabpanel. Be advised that
that you are working in the development environment of Rails. A call to
$ rake assets:clean
$ rake assets:precompile
could be needed in order to see changes once you deploy your main project (it should not be needed in Rails development mode).
Tip: Use mock data files as arguments for the render function.
app
│ └── views
│ │
│ └── planets
│ ├── _dummy00.html.erb
│ ├── _dummy01.html.erb
│ ├── _dummy02.html.erb
│ ├── _dummy03.html.erb
│ ├── _dummy04.html.erb
│ ├── _dummy05.html.erb
and use calls to render 'planets/dummy05' in your HTML of Q1. Make sure each dummy file contains slightly different data, in order to be able to check for working tabs.
The mock-up result provides tabs via bootstrap and looks like this .
Tabs are working as expected.
By providing you with the minimal working product, you should be enabled to bring your setup to a working state.
After all the preparation, adding a datepicker by just following the official documentation works, which answers Q2:
Sources Used To Provide This Answer
https://www.railstutorial.org/ by Michael Hartl
http://getbootstrap.com/components/#nav
http://getbootstrap.com/javascript/#tabs
http://getbootstrap.com/javascript/#tabs-usage
http://guides.rubyonrails.org/asset_pipeline.html
I encountered the same issue you do and found a solution (digging in the deep web) that worked for me. Try adding the requirements after the line require_tree . in the .css file, and in the .js file just the datepicker you use; as below:
application.css
...
*= require_tree .
*= require_self
*= require bootstrap
*= require bootstrap-datepicker
*/
application.js
...
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require bootstrap-datepicker
It is related to the asset pipeline of Ruby on Rails, you can go further on this topic in this page http://guides.rubyonrails.org/asset_pipeline.html , but first try changing the order of the lines.
I'm trying to build a Rails 4 app using the Canvas theme from Themeforest and it's kickin' me arse.
I've searched several ways to put the CSS/JS in the right folders and I even had success with it, using this tutorial. Yeah!
When I try to use the same method with the Canvas theme, all hell breaks loose. The theme comes with the following:
Canvas-Theme/
- css/
- fonts/
- (a bunch of custom fonts)
- animate.css
- bootstrap.css
- calendar.css
- camera.css
- colors.css
- colors.php
- dark.css
- font-icons.css
- fonts.css
- magnific-popup.css
- nivo-slider.css
- responsive.css
- vmap.css
- images/
- (a bunch of images)
- js/
- canvas.slider.fade.js
- events-data.js
- functions.js
- jquery.calendario.js
- jquery.camera.js
- jquery.elastic.js
- jquery.gmap.js
- jquery.js
- jquery.mousewheel.min.js
- jquery.nivo.js
- jquery.vmap.js
- plugins.js
- (tons of HTML templates)
- style.css
- style.less
In my Rails app, I'm using the default install (except mysql) which includes the following gems:
gem 'rails', '4.1.7'
# Use mysql as the database for Active Record
gem 'mysql2'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# 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
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Use debugger
# gem 'debugger', group: [:development, :test]
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]
I droped all the CSS files under
app/assets/stylesheets/
and all the JS in
app/assets/javascript/
I also created a fonts folder and put the included fonts in there
app/assets/fonts/
Here is my application.js:
//= require jquery
//= require turbolinks
//= require_tree .
Here is my application.css
*= require_tree .
*= require_self
Now, there was that one 'style.css' file in the root of the Canvas-Theme folder that I've dropped in the stylesheets folder. Not sure if that was the right thing to do.
After all of that, I copy and pasted one of the HTML files into my index.html.erb files and I'm basically getting a blank screen. I know I need to change the paths for the images but I should at least see something.
A couple questions,
Do I get rid of the 'jquery.js' file that came with the theme because Rails is including it already?
Should I use the bootstrap gem instead of the included 'bootstrap.css'?
Need to get passed this tomfoolery!
Fixed. So it turns out that it's how I'm ordering my JavaScript. I ended up changing my appilcation.js file to this:
//= require jquery
//= require turbolinks
//= require_tree .
//= require functions
I moved the 'functions.js' file to the vendors/assets/javascript folder so it would be included last after the tree was included. Seems to be doing the trick. Moral of the story, be mindful of CSS/JS order. But you knew that but who am I talking to because I've basically just commenting on my own thread. Well, I'm out.
Thank you #Craigfoo,
your solution helped me to go further. To enable the slider to work I didn't change the appilcation.js but I moved the functions.js file to the vendors/assets/javascript folder and changed the views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
<%= javascript_include_tag 'functions', 'data-turbolinks-track' => true %>
</body>
</html>
I needed to precompile. Add in config/initializers/assets.rb the line:
Rails.application.config.assets.precompile += %w( functions.js )
Hello i am using kaminari gem for pagination and i want to do paginatation via ajax .
index.html.haml
#abc
= render :partial => 'anything/anything_lists', collection: #anything_upcoming, as: :anything_schedule
#paginator
= paginate #anything_upcoming, :remote => true, :param_name => "anything_upcoming_page"
index.js.haml
$('#abc').html('#{escape_javascript render(partial: "anything/anything_lists")}');
$('#paginator').html('#{escape_javascript(paginate(#anything_upcoming, :remote => true, :param_name => "anything_upcoming_page").to_s)}');
controller file:
#anything_upcoming = AnythingSchedule.anything_upcoming.page(params[:anything_upcoming_page]).per(Settings.pagination.per_page)
respond_to do |format|
format.js
format.html
end
view source shows data-remote = true but log shows Website::EventsController#index as HTML.
so what i am missing here.
Edit: i am doing some experiment on js file and i convert index.js.haml to index.js.erb and only one time i get ajax request and also shows calling JS on logs . and i redo again then as usual not get ajax request .
Final Edit
application.js
//= require jquery
//= require jquery_ujs
//= require ckeditor-jquery
//= require bootstrap.min
//= require bootstrap-datepicker.min
//= require bootstrap-timepicker.min
//= require chosen.jquery.min
//= require jquery.popupoverlay
//= require common
//= require ace-elements.min
//= require registrations
//= require courses
//= require instructors
//= require jsapi
//= require donation
//= require workshops
//= require nav_settings_dropdown
//= require events
//= require event_schedules
//= require manage_home
//= require jquery.blockUI
//= require rails
Gem file
gem 'rails', '3.2.17'
gem 'haml'
gem 'haml-rails'
gem "rails_config", "~> 0.3.3"
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'jquery-fileupload-rails'
gem 'jammit'
end
gem 'jquery-rails'
gem "kaminari", "~> 0.14.1"
you must have forgotten to include the application.js in your layout file
OR
you are using another js or layout then the default one. Please check this
Reason:
The syntax for the pagination is correct
= paginate #anything_upcoming, :remote => true, :param_name => "anything_upcoming_page"
you have also included jquery-rails gem and also included the libraries in application.js
and you are saying data-remote = true is applying to the element. So the only problem I guess left is above one.