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
Related
I am creating an Art Gallery app and drop down menu is not working. The toggle is created.
This is my navbar code in application.html.erb:
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown">
Categories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<% Category.all.each do |category|%>
<li class="<%= 'active' if params[:category] == category.name %>">
<%= link_to category.name, paintings_path(category: category.name), class: "dropdown-item" %>
</li>
<% end %>
</ul>
</li>
I am using Bootstrap-sass gem and the code in my application.js is:
require("#rails/ujs").start();
require("turbolinks").start();
require("#rails/activestorage").start();
require("channels");
import "bootstrap";
//= require jquery_ujs
//= require jquery
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
I think there is something about JS and it is not identifying my menu but I am wondering why. Can you please help me with this?
Thanks :)
Issue 1: My navbar toggle menu will not close, but will open, unless I remove either of the following from my layout:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Now, when i remove this the toggle works and will open and close. Although, my sign-in modal will not function without it.
or:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
Issue 2:
I have accordions that will not work on first load - but will then work once the page has been reloaded.
My navbar in summary:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar-nav navbar-right">
#more nav items code here
<li class="nav-item-2 nav-display-2">
<button type="button" class="btn ripple-effect btn-info btn-lg" id="myBtnSignIn2">Sign Up/Login</button>
<div class="modal fade" id="SignInModal2" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<%= render "devise/shared/links" %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</li>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$("#myBtnSignIn").click(function(){
$("#SignInModal").modal();
});
});
</script>
accordion code:
<a class="collapsed card-link text-center" id="edit-accordion" data-toggle="collapse" href="#collapseFIRST">
</a>
<div id="collapseFIRST" class="collapse" data-parent="#accordion">
<div class="card-body">
</div>
</div>
application.js:
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery
//= require Chart.bundle
//= require chartkick
Is there any you see standing out in my code wrong?
You can try this in your script. It is explained here
$( document ).on('turbolinks:load', function() {
$("#myBtnSignIn").click(function(){
$("#SignInModal").modal();
});
});
Add the bootstrap gem to your Gemfile and remove the html tag from the layout
Gemifle
gem 'bootstrap', '~> 4.3.1'
You should not have 2 versions of jQuery.
Then run bundle install
Then change this to:
/= require rails-ujs
//= require activestorage
//= require jquery3
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require Chart.bundle
//= require chartkick
//= require turbolinks
//= require_tree .
Also in hour applications.scss you should have
#import "bootstrap";
Also in layout try instead:
<%= javascript_include_tag 'application', 'data-turbolinks-track': true %>
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
This is link to my app on heroku: http://glacial-temple-5892.herokuapp.com/
It has a dropdown having 4 links, all pointing to the home url.
If you click 'dropdown' first, then dropdown will open and shows 4 links. When one link clicked, it will come to same page(home page with route '/') and then clicking dropdown doesnt work now. But, when we refresh or press enter on address bar, it works.
Whats the solution ?
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Assets test</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Hello </a>
<ul class='nav navbar-nav'>
<li><a >link</a></li>
<li><a >link</a></li>
<li class='dropdown'>
Dropdown<b class="caret"></b>
<ul class="dropdown-menu">
<li><a href='/'>link 1</a></li>
<li><a href='/'>link 2</a></li>
<li><a href='/'>link 3</a></li>
<li><a href='/'>link 4</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<p class='notice'><%= notice %></p>
<p class='alert'><%= alert %></p>
<%= yield %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
</body>
</html>
app/assets/javascripts/application.js
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//=require dropdown
//= require_tree .
app/assets/stylesheets/application.css
/*
* 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 vendor/assets/stylesheets of plugins, if any, 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 top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*=require bootstrap
*/
I placed bootstrap.css in vendor/stylesheets
I placed dropdown.js in vendor/javascripts/ directory
Check this topic: same problem due to turbolinks which does not trigger Document.ready event.
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!