All geek questions in one place

JQuery not working - rails

I can't get my jquery to work from the asset pipeline, and I tried many fixes and nothing works, and I just can't figure it out. I have a simple jquery function to test it. Please note: it works when I put jquery code in HTML.

application /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 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
+5
source share
4 answers

Your items have not yet appeared on the page. Just just wrap your actions in jQuery document.ready to wait for them

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

Documentation: $ (document) .ready ()

+10
source

Check turbolinks boot event, for example:

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

Why don't you try to create a new file inside your app/assets/javascripts folder and place your code here? The 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 not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file.

Strike>

Make sure your assets are recompiled for every request. If so, you should see a list of GET requests to the server each time the page is loaded in the development.log file

+2
source

You can do this by creating the appropriate .js.erb file for the html file mentioned above and add jquery to it. For example, suppose html is located in index.html.erb, create index.js.erb and put jquery in it.

index.js.erb:

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

Then in application.js add this:

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

where you can put the model name path (e.g. posts.js) in case your url is / messages for the html index page. I reproduced all this in my system and its work here.

-1
source

Source: https://habr.com/ru/post/1260241/

More articles:


All Articles