How to import JavaScript into RoR project with Rubymine?

Question

I am having an issue using JQuery in my RoR project in Rubymine. I am new to Ruby on Rails and want bootstrap-sass in my project. I followed the instructions from here, which is the Github bootstrap repository. I am using rails6.0.0.

And I have the following snippet in my application.html.erb:

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#main-nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to 'SaaS', root_path, class: 'navbar-brand' %>
    </div>

    <div class="collapse navbar-collapse" id="main-nav-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Login", '#' %></li>
      </ul>
    </div> <!--      /.navbar-collapse-->
  </div>
</nav>

A navbar-button is generated when the width drops below about 600px, however, when I click it, it does not give me the collapsed list. So I am assuming the problem is with the JQuery support.

These are the gems I imported for the JQuery support.

gem 'jquery-rails'
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'

And the imports in my application.scss:

@import "bootstrap-sprockets";
@import "bootstrap";

My require statements for my application.js:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//= require jquery
//= require bootstrap-sprockets

I have restarted my server several times and ran bundle install. I, also, do not get any error when running the server or while clicking the button.

Edit: When adding the require statements to application.js, the directory stated here is different from my application.js directory.

Directory in instruction app/assets/javascripts/application.js. My directory app/javascript/packs/application.js. I created the directory asked for in the instructions and put the the require statements there.

score 1 · Answer 1 · answered Sep 07 '19 at 20:50

1

Apart from adding the jquery-rails and bootstrap-sass gems to the Gemfile and adding the imports to the application.scss file, you need to include the javascripts for jquery and bootstrap in the application.js file. These steps are also mentioned in the docs if you go through them clearly.

application.js

//= require jquery
//= require bootstrap-sprockets

If you are using sass make sure you delete the default application.css file generated in a new rails project.

answered Sep 07 '19 at 20:50

inventionsbyhamid

156
1
10

Sorry, I forgot to include it in my question but I've done that. – Beulah Akindele Sep 07 '19 at 21:28
Is the order of the js files same? This could be a issue related with turbolinks, see if removing `//= require turbolinks` from `application.js` works for you. If it works after removing then maybe you need to reinitialize the dropdown. – inventionsbyhamid Sep 07 '19 at 21:43
Yes, the order is the same. And no... it still did nit work. – Beulah Akindele Sep 08 '19 at 00:21

score 0 · Accepted Answer · answered Sep 08 '19 at 02:37

ok so in rails 6 you will notice the use of the javascript folder app/javascript this means that anything you do with JS should be done from there. The reliance on gems for these is now minimal and replaced by yarn.

what you are missing is the yarn install.

this is a process I like to use which I have modified from something i read on medium a while back

# app/javascript/packs/application.js
import '../stylesheets/application'


# app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

in the console run

yarn add bootstrap@4.3.1 jquery popper.js

then

# config/webpack/environment.js
...
const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)
...

then

# app/javascript/packs/bootstrap_custom.js
import 'bootstrap/js/dist/alert'
import 'bootstrap/js/dist/button'
import 'bootstrap/js/dist/carousel'
import 'bootstrap/js/dist/collapse'
import 'bootstrap/js/dist/dropdown'
import 'bootstrap/js/dist/index'
import 'bootstrap/js/dist/modal'
import 'bootstrap/js/dist/popover'
import 'bootstrap/js/dist/scrollspy'
import 'bootstrap/js/dist/tab'
import 'bootstrap/js/dist/toast'
import 'bootstrap/js/dist/tooltip'
import 'bootstrap/js/dist/util'

And link it in your app/javascript/packs/application.js file.

# app/javascript/packs/application.js
import './bootstrap_custom.js'

then

# app/javascript/stylesheets/application.scss
@import './bootstrap_custom.scss'

then

# app/javascript/stylesheets/bootstrap_custom.scss
@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/_mixins.scss';
@import '~bootstrap/scss/_root.scss';
@import '~bootstrap/scss/_reboot.scss';
@import '~bootstrap/scss/_type.scss';
@import '~bootstrap/scss/_alert.scss';
@import '~bootstrap/scss/_badge';
@import '~bootstrap/scss/_breadcrumb';
@import '~bootstrap/scss/_button-group';
@import '~bootstrap/scss/_buttons';
@import '~bootstrap/scss/_buttons.scss';
@import '~bootstrap/scss/_card.scss';
@import '~bootstrap/scss/_carousel.scss';
@import '~bootstrap/scss/_close.scss';
@import '~bootstrap/scss/_code.scss';
@import '~bootstrap/scss/_custom-forms.scss';
@import '~bootstrap/scss/_dropdown.scss';
@import '~bootstrap/scss/_forms.scss';
@import '~bootstrap/scss/_grid.scss';
@import '~bootstrap/scss/_images.scss';
@import '~bootstrap/scss/_input-group.scss';
@import '~bootstrap/scss/_jumbotron.scss';
@import '~bootstrap/scss/_list-group.scss';
@import '~bootstrap/scss/_media.scss';
@import '~bootstrap/scss/_modal.scss';
@import '~bootstrap/scss/_nav.scss';
@import '~bootstrap/scss/_navbar.scss';
@import '~bootstrap/scss/_pagination.scss';
@import '~bootstrap/scss/_popover.scss';
@import '~bootstrap/scss/_print.scss';
@import '~bootstrap/scss/_progress.scss';
@import '~bootstrap/scss/_spinners.scss';
@import '~bootstrap/scss/_tables.scss';
@import '~bootstrap/scss/_toasts.scss';
@import '~bootstrap/scss/_tooltip.scss';
@import '~bootstrap/scss/_transitions.scss';
@import '~bootstrap/scss/_utilities.scss';

If you choose to follow this follow it precisely, do not change the scss lines etc it will mess it up

Thanks so much, it is working now. I just have one issue though, my navbar is centered now. Then when I click it, it shifts to the far right. — Beulah Akindele, Sep 08 '19 at 06:09
i rejected your edit... because it is incorrect... the pack_tag is what should be used. — Joe Bloggos, Sep 08 '19 at 06:48
the problem you describe in your comment sounds like an issue with an unclosed row... check your code — Joe Bloggos, Sep 08 '19 at 06:49
Thank you once more. I only offered the edit because when I used the pack_tag, my nav header completely collapsed. Also, I use Rubymine and there are no unclosed tags. — Beulah Akindele, Sep 08 '19 at 08:45
check the code again, try adding ; to # app/javascript/packs/application.js import './bootstrap_custom.js' like so # app/javascript/packs/application.js import './bootstrap_custom.js'; — Joe Bloggos, Sep 08 '19 at 08:57
also, just because you are using ruby mine, your code can still be funky — Joe Bloggos, Sep 08 '19 at 10:10
I already did that as per your instructions in your answer. The navbar is working fine but only when I set the first erb command to `stylesheet_link_tag`. Also, I meant that Rubymine would tell me if there was an unclosed tag plus I've gone over th code myself, so I am certain the error isn't from that. I am new to RoR not HTML and CSS. — Beulah Akindele, Sep 08 '19 at 13:29
so I have a question, what is in your app/assets/stylesheets folder? ... if your styles work when this is called, you have styles in there that are not being called in your app/javascript/stylesheets/application.scss... remember to change back to pack_tag to reinstate changes — Joe Bloggos, Sep 09 '19 at 07:54
I'm sorry, but I don't understand. Isn't the fact that it works supposed to mean that my styles are being called? — Beulah Akindele, Sep 09 '19 at 11:44
In my `app/assets/stylesheets` folder I have application.scss and pages.scss, which was generated with my pages controller. In the application.scss, I have `@import "bootstrap-sprockets"; @import "bootstrap";` while in `app/javascript/stylesheets/application.scss`, I have '@import './bootstrap_custom.scss''. — Beulah Akindele, Sep 09 '19 at 12:10
Also, what happens if I leave the two in? Won't it just link to the two files and problem solved? Because when I move the imports of `app/assets` to `app/javascript`, my bootstrap doesn't work. — Beulah Akindele, Sep 09 '19 at 18:58
so <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> is calling app/javascript/stylesheets/application.scss — Joe Bloggos, Sep 10 '19 at 09:24

How to import JavaScript into RoR project with Rubymine?

2 Answers2