Ruby on Rails Install JQuery

Question

I create a new project, i am just follow the tutorial step by step to install jquery in my project, but it doesn't work.

I add this two line to my view.

<% stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<% javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

Project\Gemfile

    source 'https://rubygems.org'

    git_source(:github) do |repo_name|
      repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
      "https://github.com/#{repo_name}.git"
    end


    # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
    gem 'rails', '~> 5.1.4'
    # Use sqlite3 as the database for Active Record
    gem 'sqlite3'
    # Use Puma as the app server
    gem 'puma', '~> 3.7'
    # Use SCSS for stylesheets
    gem 'sass-rails', '~> 5.0'
    # Use Uglifier as compressor for JavaScript assets
    gem 'uglifier', '>= 1.3.0'
    # See https://github.com/rails/execjs#readme for more supported runtimes
    # gem 'therubyracer', platforms: :ruby

    # Use CoffeeScript for .coffee assets and views
    gem 'coffee-rails', '~> 4.2'
    # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
    gem 'turbolinks', '~> 5'
    # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
    gem 'jbuilder', '~> 2.5'
    # Use Redis adapter to run Action Cable in production
    # gem 'redis', '~> 3.0'
    # Use ActiveModel has_secure_password
    # gem 'bcrypt', '~> 3.1.7'

    # 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', platforms: [:mri, :mingw, :x64_mingw]
      # Adds support for Capybara system testing and selenium driver
      gem 'capybara', '~> 2.13'
      gem 'selenium-webdriver'
    end

    group :development do
      # Access an IRB console on exception pages or by using  anywhere in the code.
      gem 'web-console', '>= 3.3.0'
    end

    # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
    gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

    gem 'jquery-rails'
    gem 'mysql2'

Project\app\assets\javascripts\application.js

    // This is a manifest file that'll be compiled into application.js, which will include all the files
    // listed below.
    //
    // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
    // vendor/assets/javascripts directory 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. JavaScript code in this file should be added after the last require_* statement.
    //
    // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
    // about supported directives.
    //
    //= require rails-ujs
    //= require turbolinks
    //= require jquery
    //= require jquery_ujs
    //= require_tree .

i think you haven't put jquery require file in propery order. lets try the given solution. — Anand
– Anand, Commented Jan 16, 2018 at 10:27

Anand · Accepted Answer · 2018-01-16 10:37:28Z

3

//= require jquery
//= require jquery_ujs
// require turbolinks
//= require_tree .

in your layouts: -

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>

after the above changes restart your server.

edited Jan 16, 2018 at 10:37

answered Jan 16, 2018 at 10:24

Anand

6,5414 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kase Over a year ago

It is work now, but i have another error. It show [object doesn't support this property or method] on cmd when //= require turbolinks, but it is work without //

Anand Over a year ago

@Kase just comment turbolinks by changing it // require turbolinks in application.js as i edited the answer and restart your server also. hope it helped you. feel free to accept/upvote answer.

Kase Over a year ago

i comment the require_tree, it is work perfectly now.

Simon Franzen · Accepted Answer · 2018-01-16 10:23:48Z

0

Do this when include stylesheet and javascript

<%= stylesheet_link_tag ....
<%= javascript_include_tag ....

You forgot to output. Thats correct -> <%= ... %>

You are just wrote <% ... %>

answered Jan 16, 2018 at 10:23

Simon Franzen

2,72727 silver badges35 bronze badges

1 Comment

Simon Franzen Over a year ago

Have you looked into the HTML code what css and js is actually getting loaded ? Or in your inspectors network tab look what files are getting loaded. What @Gabbar and me wrote should work.

Collectives™ on Stack Overflow

Ruby on Rails Install JQuery

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related