CODEWITHSUNDEEP
jqueryruby-on-rails
richiepop2
richiepop2

Reputation: 348

JQuery not working - rails

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

Upvotes: 6

Views: 2417

Answers (4)

nikolayp
nikolayp

Reputation: 17919

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()

Upvotes: 13

adass
adass

Reputation: 345

Why don't you try to create a new file inside your app/assets/javascripts folder and put your code here? First lines of application.js say

// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.

Make sure your assets are recompiled on each request. If so, you should see a list of GET request to the server on each page load in the development.log

Upvotes: 2

VishalTheBeast
VishalTheBeast

Reputation: 484

You can do it by creating the corresponding .js.erb file for the html file mentioned above and add the jquery in that. For eg suppose the html is in index.html.erb, create index.js.erb and place the jquery in it.

index.js.erb:

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Then in application.js, append this:

$(function() {
 $.getScript("/<model name path>.js");
});

where you can place the model name path (for eg posts.js) in case your url is /posts for the index html page. I replicated all this in my system and its working here.

Upvotes: -1

neydroid
neydroid

Reputation: 1951

Check for the turbolinks load event like:

document.addEventListener("turbolinks:load", function() {
  $("#hide").click(function(){
    $("p").hide();
  });

  $("#show").click(function(){
    $("p").show();
  });
})

Upvotes: 2

Related Questions