So I've been reading about how to get jQuery and Turbolinks to play nicely together for hours now and I still can't get .change() to fire. I've added the jquery-turbolinks gem to no avail. Here is my CoffeeScript:
$(document).ready ->
$("#data_type").change ->
dt = $("#data_type").val()
switch dt
when "radio" then $("#radio_conditional").show()
when "checklist" then $("#checklist_conditional").show()
when "integer", "decimal"
$("#units_conditional").show()
$("#length_conditional").show()
else $("#radio_conditional", "#checklist_conditional", "#units_conditional", "#length_conditional").hide()
return
return
Basically I want certain fields on my form to only show when a certain data type is selected for the selector #data_type. I think $(document).ready is working, but nothing happens when I change the data type, no matter which type I choose. I know jQuery is working because I can enter $("#radio_conditional").hide() in the console and it works. I have a feeling I'm missing something simple here but I can't figure out. Any ideas?
Here is my application.js:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require nested_form_fields
//= require turbolinks
//= require_self
//= require_tree .
//= stub pages
Here's my Gemfile:
source 'https://rubygems.org'
ruby "2.2.3"
# 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'
# 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'
# 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'
# Turbolinks also screws up jquery. This gem fixes it.
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
# Use figaro for setting environment variables
gem 'figaro'
# Use simple_form for forms
gem 'simple_form'
# Use nested_form_fields to create forms for nested associations
gem 'nested_form_fields'
# Use bootstrap for easy CSS
gem 'bootstrap-sass'
Try wrapping your js in this:
var ready;
ready = function() {
// your code
$(document).on('page:change', ready);
That always did it for me.
Okay, I figured it out. Turns out I was trying to select "#data_type" at page ready, but it didn't actually exist on the page until I clicked "Add Variable", and thus the selector never selected. I changed the script to fire on clicking "Add Variable." All fixed now, thanks!
Related
I have been trying to solve this issue for weeks, but with no succes so instead of looking for the answear in other peoples questions, I thought I should write my own.
The problem is as follows. A couple of weeks ago I finished one of my rails projects, so I pushed the repo to heroku. Everything seemed to work fine, but then I notice that my navbar toogle was not working and my carousel neither. Locally ther work perfectly.
Currently it is hosted on heroku.
These are the things I have tried.
Assets precompiled and clean
Installed gem 'rails_12factor'
Reordered app.js as follows
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require twitter/bootstrap
//= require lightbox
//= require_tree .
//= require owl.carousel
I even deployed my app to digital ocean(I thought that heroku was the problem)
I tried to use a different bootstrap gem. gem 'bootstrap-sass'but still the same issue.
So, basically some of the js is not working the way it should. I even tryed to use a different type of slider named flickity, I downloaded the js and css of flickity, precompile, then push but in heroku seems to be broken.
Followed the nex stackoverflow questions:
Here is my code:
production.rb
config.serve_static_files = true
config.assets.compile = true
Gemfile
gem "twitter-bootstrap-rails"
gem 'lightbox2-rails'
gem "font-awesome-rails"
gem 'activeadmin'
gem 'owlcarousel-rails'
gem 'rails_12factor', group: :production
gem "rmagick"
gem "carrierwave"
gem "mini_magick"
gem 'kaminari'
gem 'jquery-ui-rails'
gem 'sprockets_better_errors'
group :development do
gem 'capistrano', require: false
gem 'capistrano-rvm', require: false
gem 'capistrano-rails', require: false
gem 'capistrano-bundler', require: false
gem 'capistrano3-puma', require: false
end
gem 'devise'
gem 'cancan'
gem 'draper'
gem 'pundit'
gem 'rails'
gem "puma"
gem 'pg', '~> 0.20.0'
gem 'jquery-rails'
gem 'jbuilder', '~> 2.0'
aplication.css
*= require lightbox
*= require font-awesome
*= require bootstrap
*= require_tree .
*= require owl.carousel
*= require owl.theme
console error
Uncaught TypeError: $(...).carousel is not a function(…)
This error may explain why the carousel does not work. But I have tryed another ones and the they dont work either. And what about the navbar toogle?
There is this one too
Uncaught TypeError: Cannot read property 'bridge' of undefined(…)
If you need any more information let me know please.
Try putting config.assets.debug = true in your production.rb file and see if that fixes it. I'm guessing there is an error in the middle of your compressed JS file causing the rest of the functions to not be executed.
I'm working with ROR 4. I posted this question about how my link_to wouldn't POST correctly using { method: :post }.
I figured out this was because I removed the Rails-Jquery gem when I first set up my app (this is a side project, I hadn't planned on using Javascript/jQuery or so I thought!).
In an effort to get my POST working, I added the gem back to Gemfile. The file now looks like this:
source 'https://rubygems.org'
gem 'aws-sdk'
gem 'faker'
gem 'jquery-rails'
gem 'inline_svg'
gem 'jbuilder', '~> 2.0'
gem 'nokogiri'
gem 'paperclip'
gem 'pg'
gem 'rails', '~> 4.2.0'
gem 'sass-rails'
I did a bundle install.
I added the below code to application.js:
//= require jquery
//= require jquery_ujs
//= require_tree .
What am I missing? jQuery still isn't loading in the Network tab in Chrome.
I'm guessing I must have changed another config setting on setup (5 weeks ago) that I am now forgetting.
UPDATE: I also removed turbolinks during the main setup. Is that needed for jQuery to work?
If you removed javascript during the initial setup, you are probably missing this from the head of your application.html.erb layout.
<%= javascript_include_tag 'application' %>
I've added a couple of JQuery functions to my Rails 4.1.8 application which uses Bootstrap 3. These functions are to solve the issue of applying the "active" styling to the current navigation tab.
The functions work well to remove the active class and apply it to the clicked tab, which is great. THE PROBLEM IS the tabs no longer work as links. When hovered, the target address shows up in the browser dialog. But when clicked, nothing happens. There is not even an event in the console. No errors are even thrown. Color changes though.
active_menu_item.js
$(document).ready(function() {
$('li>a.tab_link').click(function(e) {
$('li>a.tab_link').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
});
$(document).ready(function() {
$('.nav-pills li a.btn').click(function(e) {
$('.nav-pills li a.btn').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
});
from application.html.erb tag..
<!-- Load javascripts -->
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
application.js
//
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require change_theme
//= require active_menu_item
//= require_self
//= require_tree .
Gemfile
source 'https://rubygems.org'
gem 'rails', '4.1.8'
gem 'mysql2'
gem 'sass-rails', '~> 5.0.3'
gem 'compass', '~> 1.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'kaminari'
gem 'therubyracer', platforms: :ruby
gem 'jquery-rails'
gem 'turbolinks'
gem 'jquery-turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'spring', group: :development
gem 'fabrication', '~> 2.12.2'
gem 'ffaker'
gem 'forgery'
gem 'rufus-scheduler', '~> 3.1.1'
gem "activeuuid"
gem 'foreigner', '~> 1.7.2'
gem 'aws-sdk', '~> 2.0.24'
group :development do
gem 'rails-erd', '~> 1.3.0'
end
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
gem 'bootstrap_form'
gem 'puma', '~> 2.11.1'
gem 'devise'
Tried removing the e.preventDefault(); line, but then it doesn't work at all. I also tried setting TurboLinks to "false" in my application.html.erb, and removing TurboLinks references in application.js as well as the Turbolinks Gem and the Jquery-Turbolinks gem, but that did nothing. It also broke lots of other stuff so I put it back in.
I'm pretty sure it's a problem with how I've written the functions. My JQuery is pretty bad (still learning) and I more or less find functions and modify them to suit my needs. I don't really understand if I've even loaded JQuery properly. Guess I'm kind of hoping Rails gems are doing that for me?
I know very little about JQuery and have searched extensively before asking this. I know the functions are targeting the right thing because they change color and stay until I click something else. Only thing is, once clicked the links are disabled completely. If any other code is needed to find a solution, I'll be happy to post it.
EDIT: Made a fiddle to demonstrate. However, it doesn't show the actual problem - the links will change color, but no longer work as links.
Please Help.
Thank you
The reason why your links aren't working is because you've specified e.preventDefault() in your callback. Take a look (here)[http://api.jquery.com/event.preventdefault/] for more information.
If you remove that line in the callback, you'll see that your links now work but something else unexpected happens - the color will change briefly (as a result of having the active class applied) but then go back to normal when the page re-renders. This is because while the click handler gets called immediately and adds the class, Turbolinks then replaces the entire body with the response.
I would suggest not using jQuery and instead relying on the current_page? helper to determine whether the class should be applied. In other words, in the view where you render your links, do something like this
<li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li>
Hope this helps.
I'm using Rails 4 and the bootstrap-sass gem. I've been using it for a while, but I was having some trouble with a custom carousel and so I attempted to remove the bootstrap-sass gem and import the bootstrap css, javascript, and fonts manually. That didn't solve my problem, so I removed those files and started using the gem again.
Now most of the styling that was working using the bootstrap css is now not working. Buttons are no longer buttons, the nav is just an unordered list of links, one above the other. However, a carousel is still behaving like a carousel. It looks like bootstrap.css is being loaded on requested the page, but like I said, most of the styling is not working at all. Can anyone think of why this may be and what I can do to fix it. Please let me know what information I need to share to help you better understand what's going on. Thanks!
If you use firefox or chrome to inspect components on the screen that should have styling that is obviously missing, the panels on the right that summarize the styling being applied points to specific lines in the bootstrap.css file, so it seems like the browser is under the impression that the styles are being loaded.
To help understand what I've got going on are all the places where I reference the bootstrap styling, javascript, etc.:
Gemfile:
source 'https://rubygems.org'
ruby '2.0.0'
#ruby-gemset=railstutorial_rails_4_0
gem 'rails', '4.0.2'
gem 'bootstrap-sass', '~> 3.1.1'
gem 'bcrypt-ruby', '3.1.2'
gem 'faker', '1.1.2'
gem 'will_paginate', '3.0.4'
gem 'bootstrap-will_paginate', '0.0.9'
gem 'state_machine', '1.2.0'
gem 'pg', '0.15.1'
gem 'figaro'
gem 'jquery-turbolinks'
group :development, :test do
gem 'rspec-rails', '2.13.1'
gem 'guard-rspec', '2.5.0'
end
group :test do
gem 'selenium-webdriver', '2.35.1'
gem 'capybara', '2.1.0'
gem 'factory_girl_rails', '4.2.1'
end
gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'
group :doc do
gem 'sdoc', '0.3.20', require: false
end
group :production do
gem 'rails_12factor', '0.0.2'
end
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
app/assets/stylesheets/application.css:
*= require_self
*= require_tree .
*= require bootstrap.css
*/
app/assets/stylesheets/custom.css.scss:
#import "bootstrap";
Try updating your application.css to:
*= require_self
*= require bootstrap.css
*= require_tree .
*/
I believe order matters in a lot of these files...
I have a newish Rails 4 app which contains no custom Javascript - the folders app/assets/javascripts, lib/assets/javascripts and vendor/assets/javascripts are all empty (apart from app/assets/javascripts/application.js).
When I click around the app I keep getting the error jquery-ujs has already been loaded! in the JS console. It happens every time I hit the "back" button, and sometimes when I click a normal link (although I can't make it happen consistently.)
application.js:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
When I remove turbolinks from application.js, I stop getting the error... so turbolinks appears to be the culprit.
Is this a bug with turbolinks, or am I doing something wrong?
Here's my Gemfile:
source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails', '4.0.0'
gem 'active_model_serializers'
gem 'aws-sdk'
gem 'bootstrap-sass-rails'
gem 'coffee-script-source', '1.5.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'devise'
gem 'factory_girl_rails', '4.1.0'
gem 'figaro'
gem 'font-awesome-sass-rails'
gem 'jbuilder', '~> 1.2'
gem 'jquery-rails'
gem 'paperclip'
gem 'paperclip-meta', github: 'y8/paperclip-meta'
gem 'pg'
gem 'sass-rails', '~> 4.0.0'
gem 'turbolinks'
gem 'uglifier', '>= 1.3.0'
group :production do
gem 'rails_12factor'
end
group :doc do
gem 'sdoc', require: false
end
group :test do
gem 'capybara', '2.1.0'
end
group :development, :test do
gem 'childprocess', '0.3.9'
gem 'debugger'
gem 'faker', '~> 1.2.0'
gem 'json_spec'
gem 'rspec-rails'
gem 'rspec-mocks'
end
group :development do
gem 'annotate'
gem 'hirb'
gem 'wirb'
end
Changing around the order of the requires in application.js doesn't seem to help either.
The most likely explanation is that you're including your scripts in the page body.
See this issue for more: https://github.com/rails/turbolinks/issues/143
From the turbolinks readme:
As a rule of thumb when switching to Turbolinks, move all of your javascript tags inside the head and then work backwards, only moving javascript code back to the body if absolutely necessary. If you have any script tags in the body you do not want to be re-evaluated then you can set the data-turbolinks-eval attribute to false:
<script type="text/javascript" data-turbolinks-eval=false>
console.log("I'm only run once on the initial page load");
</script>
I faced the same issue and after doing some hit and trial i found the sequence of javascript files matters.
The working sequence is
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
Hope, this solution will help someone.
The problem that I had It was that I copied the <%= render 'layouts/head'%> twice!, in the head and in the body. check the laouts/application.html.erb file
For me, I had included these written twice so it was loading twice. Once in application.js //= require jquery and once in application.html.erb as a script tag.