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:
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./twbs/bootstrap-sass/issues/714
Share Improve this question edited Sep 7, 2016 at 4:46 Mel asked Sep 3, 2016 at 7:04 MelMel 2,71531 gold badges135 silver badges312 bronze badges5 Answers
Reset to default 3Works 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.
This worked for me: https://stackoverflow./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.
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>
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 piled 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
* piled 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.
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>