Rails 4 - which order to put jQuery and bootstrap?

Question

I'm trying to figure out how to load assets in my application.js.

I have these required files (among others) in my application.js.

//= require bootstrap-sprockets
//= require jquery
//= require jquery-ui
//= require jquery_ujs

My gem file has:

gem 'jquery-rails'
gem 'jquery-ui-rails'

When bootstrap-sprockets is before jQuery, then my bootstrap dropdown menu (below) works fine.

<div class="row" style="margin-top:30px">
    <div class="col-md-3 col-md-offset-8">
        <% if policy(@project).show? %>    

            <div class="btn-group">
              <button type="button" style="color: black" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                STATUS: <%= text_for_state(@project.current_state) %> <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                 <% if policy(@project).request_preapproval? %>    
                    <%= link_to "REQUEST APPROVAL", request_preapproval_project_path(@project), method: :put, :style=>"padding-left:20px; padding-right: 10px" %>
                <% end %>
                <li role="separator" class="divider"></li>
                <% if policy(@project).publish? %>    
                    <%= link_to "PUBLISH", publish_project_path(@project),  method: :put, :style=>"padding-left:20px; padding-right: 10px" %>
                <% end %>
                <li role="separator" class="divider"></li>

                <!-- <a href="#" class='btn btn-primary'>REQUEST MORE INFORMATION</a> -->
                <% if policy(@project).update? %>

                    <%= link_to "EDIT PROJECT", edit_project_path(@project), :style=>"padding-left:20px; padding-right: 10px" %>
                <% end %>

                 <li role="separator" class="divider"></li>
                <% if policy(@project).edit? %>    
                    <%= link_to "REMOVE", edit_project_path(@project), :style=>"padding-left:20px; padding-right: 10px" %>
                <% end %>
              </ul>
            </div>


        <% end %>
    </div>    
</div

However, in that case, my tab show function on the following setup doesnt work. I can't click on the tabs. If I move jQuery above bootstrap-sprockets, it does work, but then the drop down menu, which otherwise works, stops working.

<div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="dp-tab-1">
                        <ul class="dp-tab-list row" id="myTab">
                            <li class="col-md-3 col-xs-6 active" >
                                <a href="#tab-guag-content-first">
                                    <span>MOTIVATION</span>
                                </a>
                            </li>
                            <li class="col-md-3 col-xs-6">
                                <a href="#tab-guag-content-second">
                                    <span>OBJECTIVES</span>
                                </a>
                            </li>
                            <li class="col-md-3 col-xs-6">
                                <a href="#tab-guag-content-third">
                                    <span>VISION</span>
                                </a>
                            </li>

                        </ul>

                        <div class="dp-tab-content tab-content">
                            <div class="tab-pane row fade in active" id="tab-guag-content-first">

                                <div class="col-md-12">
                                    <div class="tab-inner">

                                        <p class='medium-text'>
                                            <%= @project.motivation %>
                                        </p>
                                        <br/>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane row fade" id="tab-guag-content-second">
                                <div class="col-md-12">
                                    <div class="tab-inner">
                                        <p class='medium-text'>
                                            <%= @project.objective %>
                                        </p>
                                        <br/>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <img class='wow fadeInUp img-responsive' src="images/iphone-mockup.png" alt=""/>
                                </div>
                            </div>

                            <div class="tab-pane row fade" id="tab-guag-content-third">

                                <div class="col-md-12">
                                    <div class="tab-inner">
                                        <div class='services-content'>
                                            <strong>Long Term Research Vision</strong>
                                            <p class='medium-text'>
                                                <%= @long_term %>
                                            </p>
                                        </div>
                                        <div class='services-content'>
                                            <strong>Immediate Challenge</strong>    
                                            <p class='medium-text'>
                                                <%= @immediate_challenge %>
                                            </p>
                                        </div>    
                                        <br/>
                                        <!-- <a class='btn btn-primary'>READ MORE</a> -->
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
            <!-

When I try to render the page in the case when bootstrap is loaded before jQuery, I get this error in the chrome inspector console tab:

main.self-9711b4c….js?body=1:56 Uncaught TypeError: dp(...).tab is not a function(anonymous function) @ main.self-9711b4c….js?body=1:56dispatch @ jquery.self-660adc5….js?body=1:5227elemData.handle @ jquery.self-660adc5….js?body=1:4879

How can I solve this so that I can have both the drop down and the tabs working?

My entire application.js is:

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require bootstrap-sprockets
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require masonry.pkgd.min
//= require multipleFilterMasonry
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require underscore
//= require gmaps/google
//= require markerclusterer
//= require infobox
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
//= require slider
//= require bootstrap-slider
//= require_tree .

NEXT ATTEMPT

I have tried all of the suggestions in this post: none of them work for me: https://github.com/twbs/bootstrap-sass/issues/714

Answer 1

Ok what you need to is this:

//= require jquery
//= require jquery-ui 
//= require jquery_ujs
//= require bootstrap-sprockets

Now your tab show function works and your menu doesn't, let's fix that aswell.

Add this script to your page:

<script>
$('.dropdown-toggle').dropdown()
</script>

Answer 2

This worked for me: https://stackoverflow.com/a/22977412/2860931 It doesnt feel like an actual solution - but rather a work around. I'll take that as good enough for now. I've tried at least 30 different solutions posted in various places on SO.

Answer 3

Firstly, I'm going to assume you're using gems to load some of the assets, such as jquery-rails. I say this because if you have the require_tree . statement, then all of the files in your javascripts will be included automatically. Secondly, try setting up your application.js to look something like this:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require misc-stuff
 *= require jquery-stuff
 *= require bootstrap-stuff
 */

I noticed you didn't have a require_self statement in the snippet you provided, so that may also have something to do with your problem.

Thirdly, you may have some css problems.

Answer 4

U r missing

data-toggle="tab"

The example of working code:

<a href="#tab-guag-content-first" data-toggle="tab">
  <span>MOTIVATION</span>
</a>
...
<a href="#tab-guag-content-second" data-toggle="tab">
  <span>OBJECTIVES</span>
</a>
...
<a href="#tab-guag-content-third" data-toggle="tab">
  <span>VISION</span>
</a>

Answer 5

Works perfectly.

//= require jquery
//= require jquery-ui 
//= require jquery_ujs
//= require bootstrap-sprockets

You have defined bootstrap.js before the jquery. but in every application you should defined jquery at the top, so it would be load first.