Menu
I cannot get my jquery to work from the asset pipeline and I have tried a host of things to fix and nothing is working and I just can't seem to figure this out. I have a simple jquery function for now to test it. Note, it works when I put the jquery code in the HTML.
app/javascripts/application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
HTML
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
GemFile
source 'https://rubygems.org'
gem 'pg', '0.17.1'
gem 'rails', '4.2.2'
gem 'puma', '3.4.0'
gem 'sass-rails', '4.0.3'
gem 'uglifier', '3.0.0'
gem 'coffee-rails', '4.1.0'
gem 'jquery-rails', '4.1.1'
gem 'turbolinks', '2.3.0'
gem 'jbuilder', '2.2.3'
gem 'bootstrap-sass', '3.2.0.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'contact_us', '~> 1.0.1'
gem 'simple_form'
gem 'aws-sdk', '< 2.0'
gem 'will_paginate'
gem 'ransack'
gem 'figaro'
gem 'jquery-turbolinks'
gem 'devise'
gem 'devise_security_extension'
gem 'stripe'
group :development, :test do
gem 'pg', '0.17.1'
gem 'byebug', '3.4.0'
gem 'web-console', '2.0.0.beta3'
gem 'spring', '1.1.3'
gem 'foreman'
end
group :production do
gem 'pg', '0.17.1'
end
Config/development
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
# In the development environment your application's code is reloaded on
# every request. This slows down response time but is perfect for development
# since you don't have to restart the web server when you make code changes.
config.cache_classes = false
config.assets.initialize_on_precompile = false
# Emailer.
config.action_mailer.default_url_options = { :host => 'localhost:3000' }
config.action_mailer.raise_delivery_errors = true
config.action_mailer.smtp_settings = {
address: "smtp.sendgrid.net",
port: 587,
domain: ENV["HEROKU_DOMAIN"],
authentication: "plain",
enable_starttls_auto: true,
user_name: ENV["SENDGRID_USERNAME"],
password: ENV["SENDGRID_PASSWORD"]
}
# Do not eager load code on boot.
config.eager_load = false
# Show full error reports and disable caching.
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
# Don't care if the mailer can't send.
config.action_mailer.raise_delivery_errors = false
# Print deprecation notices to the Rails logger.
config.active_support.deprecation = :log
# Raise an error on page load if there are pending migrations.
config.active_record.migration_error = :page_load
# Debug mode disables concatenation and preprocessing of assets.
# This option may cause significant delays in view rendering with a large
# number of complex assets.
config.assets.debug = true
# Asset digests allow you to set far-future HTTP expiration dates on all assets,
# yet still be able to expire them through the digest params.
config.assets.digest = true
# Adds additional error checking when serving assets at runtime.
# Checks for improperly declared sprockets dependencies.
# Raises helpful error messages.
config.assets.raise_runtime_errors = true
# Raises error for missing translations
# config.action_view.raise_on_missing_translations = true
end
591
asked Nov 23 '16 20:11
Your elements didn't appear on the page yet. So just simply wrap your actions in jQuery document.ready to wait them
$( document ).ready(function() {
$("#hide").click(function(){
$("p").hide();
});
});
Documentation: $( document ).ready()
116
Check for the turbolinks load event like:
document.addEventListener("turbolinks:load", function() {
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With