CODEWITHSUNDEEP
jqueryruby-on-railstwitter-bootstrapruby-on-rails-5.2
KishFox
KishFox

Reputation: 11

Bootstrap / jQuery load order in Rails 5 breaking no matter which order I use

In my Rails 5 Application, we utilize Dropdown toggles via Bootstrap / jQuery. The issue is, no matter which order I load jQuery and Bootstrap in application.js, console outputs "Bootstrap's JavaScript requires jQuery" -OR- dropdowns simply route to /# on click. Changing the load order temporarily fixes the issue, then it comes back.

First, apologies if I left something out here. It's my first post to StackOverflow...

We've changed application.js load order from:

(this throws no console errors, just toggles stop functioning) .. //= require jquery //= require bootstrap ..

to .. (this throws "Bootstrap JavaScript requires jQuery in JS console) //= require bootstrap //= require jquery ..

and back several times

(following code IS checked, all tags are closed, I abbreviated them to show what the two functions that coexist are supposed to do)

application.js ..

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require bootstrap
//= require jquery
//= require_tree .

quick-edit view ..

<div class="collapse" id = "quickedit-user-<%= user.id %>
    <%= render partial:users_quick_edit', locals { user: user } %>
</div>

.. dropdown nav

..

<li class="dropdown">
    <a href="#" id="dropdownMenu" class= "dropdown-toggle" data-toggle="dropdown">
         <%= current_user.username %> <b class="caret"></b> 
     </a>
     <ul class="dropdown-menu">
          <li><%= link_to "Profile", current_user %></li>

..

The result of proper loading of assets should be that not only do toggles for dropdowns work, but the "quick edit forms" should function properly as well. We do not see that, as they break in either setup.

Upvotes: 0

Views: 383

Answers (3)

user5781320
user5781320

Reputation:

i have same issues on web(drop downs not functionals,tons of errors in console.log) and i solve by loading all stuff in other order (not sure if works in Rails cause i do not use it ). (ps. 2nd method to try :well like alternative if you do not use jquery effects there is the same jquery functionality in zepto.js)

i use in web dev this:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>

so i load them local on the server from that folders and i use bundle cause contains popper. and put them in that order i have no more errors by any kind. NOT SURE IF WORK IN YOUR CASE SOMETHING SIMILAR

Upvotes: 0

KishFox
KishFox

Reputation: 11

The answer for this has to do with the turbolinks include tag in the layout. By default, it's set to true, so disabling it like this:

<%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>

fixed the issues we had.

Upvotes: 1

Nick M
Nick M

Reputation: 2522

Shouldn't you require jquery before bootstrap? In application.js...

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require bootstrap
//= require_tree .

Upvotes: 0

Related Questions