In my Rails application, I have the following code for a dropdown menu:
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", root_path %></li>
<% if signed_in? %>
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Sign out", signout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Sign in", signin_path %>
<% end %>
</ul>
</nav>
</div>
</div>
</header>
In my application.js file I have the following code:
//= require bootstrap
I have no idea why the dropdown menu isn't working, and I have no idea how to fix it. A few days ago, it was working fine, and now it no longer functions properly. Thanks for any help!
I figured out the answer from this previous StackOverflow question:
twitter bootstrap drop down suddenly not working
I had to put //= require jquery below my line of code that required bootstrap, and then it worked!
I tested your HTML code and it worked fine.
First of all, make sure you are loading jQuery first:
//= require jquery
//= require bootstrap
Also, you have to call the dropdown via javascript:
$('.dropdown-toggle').dropdown()
The solution lies in the order you import the javascript dependencies.
This is what I had initially in my application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree
When I removed bootstrap-sprockets i my dropdown worked. However, I did not want to remove bootstrap-sprockets. So My new order looked like this;
//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
Then, to be safe, I had to clean and pre-compile assets by running the following;
rake assets:clean
bundle exec rake assets:precompile
This worked for me.
I've got in the same problem with default Rails and twitter-bootstrap-rails gem installation.
Direct call of dropdown initialisation works indeed, but it looks like kind of a workaround for me. So, I continued to search for the answers and was able to find the one that looks more appropriate:
I have solved this issue.
I add following code in users.js.coffee:
jQuery ->
$('.dropdown-toggle').dropdown()
Solution was found here. Thus, I added this code to app/assets/javascripts/bootstrap.js.coffee, so the final code in it looks like the following:
jQuery ->
$("a[rel~=popover], .has-popover").popover()
$("a[rel~=tooltip], .has-tooltip").tooltip()
$('.dropdown-toggle').dropdown()
And right after this dropdown in navbar started to work exactly as expected.
I have had this issue for the whole day but was finally able to fix it.
I applied the solution above (changing the order) and the dropdown worked. However, I noticed in the console there were errors (Uncaught ReferenceError: jQuery is not defined) due to the fact that bootstrap-sprockets was called before jQuery.
I have found a solution that worked for me here
Basically, I have included the following code below the required items in application.js as:
//= require jquery
//= require tether
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
$(document).ready(function(){
$('.dropdown-toggle').dropdown();
});
For me this worked like a charm. Hope that helps somebody!
I ran into the same issue and removing //= require bootstrap from my application.js worked for me. I hope this too helps someone!
Related
I'm running a Rails project which consists of Navgation bar on all the pages. I also have a input tag on the nav bar for searching purpose, but how to implement autocomplete in the particular search bar.
I tried using rails-jquery-autocomplete and implemented the way it asked but unfortunately it didn't worked for me. No search result are visible on screen or on console
brands_controller.rb
class Admin::BrandsController < Admin::AdminController
autocomplete :brand, :name
end
routes.rb
resources :brands, param: :uuid do
get :autocomplete_brand_name, :on => :collection
end
_navigationbar.html.erb
<form class="navbar-form pull-left" role="search">
<div class="form-group">
<input type="text" class="form-control search-bar" placeholder="Type here for search..." data-autocomplete="<%=autocomplete_brand_name_admin_brands_path%>">
</div>
</form>
Gemfile
gem 'rails', '~> 5.0.0'
gem 'rails-jquery-autocomplete'
gem 'jquery-rails'
application.js
//= require jquery
//= require jquery_ujs
//= require moltran/modernizr.min
//= require moltran/bootstrap.min
//= require tagsinput/jquery.tagsinput.min.js
//= require autocomplete-rails
Generated HTML:
<div class="form-group">
<input type="text" class="form-control search-bar" placeholder="Type here for search..." data-autocomplete="/admin/brands/autocomplete_brand_name">
</div>
You are missing //= require jquery-ui/autocomplete in application.js. Update application.js to
//= require jquery
//= require jquery_ujs
//= require moltran/modernizr.min
//= require moltran/bootstrap.min
//= require tagsinput/jquery.tagsinput.min.js
//= require jquery-ui/autocomplete
//= require autocomplete-rails
In your gemfile add
gem 'jquery-ui-rails'
Also replace input tag with
<%=autocomplete_field_tag 'search', '', autocomplete_brand_name_admin_brands_path %>
I've been trying to implement the OwlCarousel image slider into my RoR app. The problem is that the slider doesn't seem to be called upon.
This is what it currently outputs (with two images) -
This is my current relevant code -
In application.js
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require owl.carousel
//= require_tree .
In application.css.scss
/*
*= require owl.carousel
*= require owl.theme
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
In show.html.erb
<div>
<div class="col-xs-12 col-md-offset-2 col-md-6 project-right-panel">
<div id="owl-carousel">
<% #post_attachments.each do |p| %>
<%= image_tag p.avatar_url %>
<%= link_to "Edit Attachment", edit_post_attachment_path(p) %>
<% end %>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#owl-carousel").owlCarousel({
autoPlay: 3000,
item : 3,
itemsDesktop : [1119,3],
itemsDesktopSmall : [979, 3]
});
});
</script>
item : 3 should be items: 3. That might be it. Their demo also looks like they want you to wrap your images in a div with class item.
I'm using bootstrap for rails. I downloaded the bootstrap.min and reg bootstrap files into my rails app. I'm creating a dropdown menu but for some reason I'm unable to click on it and display the dropdown.
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-wrapper logo">
<div class="container">
<a class="navbar-brand" href="/">compnay logo</a>
<div id="navbar" class="secondary">
<ul class="nav navbar-nav">
<li class='secondary-nav'><%= link_to 'Log Out', destroy_user_session_path, :method => :delete %></li>
<li class="dropdown">
Dashboards <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
I tried to see if this was a jQuery not loading to execute. But that wasn't it as I was able to perform $(".navbar") and get a result back. I'm not sure what it is at this point. I feel lost and would appreciate any help.
[Edit]
Add application.js to show jquery is loading first.
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require_tree .
First of all you have to download the .js files like bootstrap-dropdown.js and add it to your assets.
And in your application.js
//= require bootstrap-dropdown.js
just before
//= require_tree .
You need to import bootstrap in your application.js:
//= require bootstrap
I do not understand why the following piece of code in my view (title bar) does not work on heroku.
It seems to work fine on both development and production on my local server. Once i push to heroku, the html generated is also good. All other bootstrap elements seem to work. However, this dropdown link does not seem to work
<% if current_user.present? %>
<div id = "account" class=" dropdown">
<a href='#' class="dropdown-toggle" data-toggle="dropdown">
<span>Account</span> <b class="caret"></b>
</a>
<ul class="dropdown-menu pull-right">
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Sign out", signout_path, method: "delete" %>
</li>
</ul>
</div>
<% end %>
The HTML generated:
<div id = "account" class=" dropdown">
<a href='#' class="dropdown-toggle" data-toggle="dropdown">
<span>Account</span> <b class="caret"></b>
</a>
<ul class="dropdown-menu pull-right">
<li>Profile</li>
<li>Settings</li>
<li class="divider"></li>
<li>
Sign out
</li>
</ul>
</div>
</div>
my app/assets/stylesheets/application.css
* = require custom
my app/assets/stylesheets/custom.css.scss
#import "bootstrap";
I am pretty new to heroku. So i am not aware of how to debug such an error. How can this be sorted out how i can debug such an error?
Some strange bug in rails: my application.js was initially:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
I had to reorder it and move bootstrap ahead of jquery
Modified application.js
//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require jquery-ui
And then I had to run
heroku run rake assets:reset
heroku run rake assets:precompile
Now it works
Well, I had the same problem. The dropdown worked on local but not on Heroku.
I had tried to reorder the //=jquery and //=bootstrap and reorder back again and again. I also ran asset precompile method. However, it still didn't work in my situation.
Then I compared an app I wrote before, and I found that there might be the conflict between 'bootstrap' and 'bootstrap-spockets'. The dropdown menu worked if either of them were removed. So I removed 'bootstrap' finally. I am not sure if it will cause any further problems but so far it's fine.
Make sure to precompile your assets
heroku run rake assets:precompile
you can add to your file application.js :
//= require bootstrap/dropdown
So, your file would be :
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
//= require bootstrap/dropdown
This is a follow up question to my post
javascript stops working after link_to in rails 4
I found this solution Making jQuery works with Turbolinks and the one that was suggested on my previous question
I added the following code to my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
$(document).on('page:load', function() {
$( ".draggable" ).draggable();
});
now draggable is not working at all on my page
<div class="draggable">
<p><strong>Title:</strong>
<%= task.title %></p>
<p> <%= link_to 'Show', task, :class => 'text' %>
</div>
Draggable should still work if you click a link and update the page by Turbolinks, but it won't work in initial loading because you havn't set it.
To make it work, you need to set it on both document ready and page:load.
$(document).on('page:load', function(){
$(".draggable").draggable();
});
$(document).ready(function(){
$(".draggable").draggable();
});