Dropdown menu not working on heroku after deploy - ruby-on-rails

I have a simple drop down menu which works great locally but when I deploy my application to Heroku, it doesn't work. It doesn't show menu options. So, when I click on Account, nothing happens.
I have added this in my production.rb file
config.assets.compile = true
config.serve_static_assets = true
config.assets.digest = true
Tired this before pushing code to Heroku, But still it not working for me
RAILS_ENV=production bundle exec rake assets:precompile
git add public/assets
git commit -m "compiled assets"
git push heroku master
Here is my code:
<% if user_signed_in? %>
<li class="dropdown">
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#" aria-expanded="false">
My Account <i class="caret"></i>
</a>
<ul class="dropdown-menu dropdown-settings">
<li>
<%= link_to user_path(current_user) do %>
<i class="fa fa-user"></i> Profile
<% end %>
</li>
<li>
<%= link_to edit_user_path(current_user) do %>
<i class="fa fa-pencil"></i> Edit Profile
<% end %>
</li>
<li>
<%= link_to edit_user_registration_path do %>
<i class="fa fa-unlock"></i> Change Password
<% end %>
</li>
<li class="divider"></li>
<li>
<%= link_to destroy_user_session_path, method: :delete do %>
<i class="fa fa-sign-out"></i> Log out
<% end %>
</li>
</ul>
</li>
<li>
<div class="m-t-sm">
<%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'fa fa-sign-out'%>
</div>
</li>
<% else %>
<li>
<div class="m-t-sm">
<%= link_to "Sign in", new_user_session_path, :class => 'btn btn-link btn-md'%> or
<%= link_to "Sign up", new_user_registration_path, :class => 'btn btn-md btn-success btn-rounded m-l'%>
</div>
</li>
<% end %>

I have solved this issue by removing this code from application.html.erb file:
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

Related

Why doesn't my dropdown menu expand to select the options within?

I'm building a review site using ruby on rails. When I code the drop-down menu, included in the code below, it won't expand.
I know from changing the code that the options are there and work, only the dropdown won't expand.
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<%= link_to "NDLabClub", root_path, class: "navbar-brand" %>
</div>
<ul class="nav navbar-nav">
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<% if user_signed_in? %>
<li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to "log In", new_user_session_path %></li>
<% end %>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<% Category.all.each do |category| %>
<li>
<%= link_to category.breed, dogs_path(category: category.breed), class: "link" %>
</li>
<% end %>
</ul>
</li>
<% if user_signed_in? %>
<li><%= link_to "Add Dog", new_dog_path%></li>
<% end %>
</ul>
</div>
</nav>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>

How to add a facebook glyphicon to rails link_to

I am trying to add a glyph-icon to my Facebook link_to in ruby on rails but when I try it doesn't show up any idea on how to do this?
This is the what I have attempted:
<li>
<i class= "fa fa-facebook"></i>
<%= link_to "Facebook", '/facebook' %>
</li>
any help is greatly appreciated..thank you
<%= link_to '/facebook' do %>
<i class= "fa fa-facebook"></i>
<% end %>
what about:
<li>
<%= link_to '/facebook' do %>
Facebook // delete if you don't need text
<i class= "fa fa-facebook"></i>
<% end %>
</li>

Getting an error when trying to get login/out and account icons in Rails, how can I fix this?

I'm trying to convert
<!-- application.html.erb -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
into an embedded Ruby HTML file.
The code I have so far is:
# app/devise/user/_login_items.html.erb
<% if user_signed_in? %>
<%= link_to destroy_user_session_path, :method => :delete, :class => 'nav-link' do %>
<%= content_tag(:span => 'test', :class => 'glyphicon glyphicon-log-out') %>
Sign out
<% end %>
<% else %>
<%= link_to 'Log in', new_user_session_path, :class => 'nav-link' do %>
<%= content_tag(:span => 'test', :class => 'glyphicon glyphicon-log-in') %>
Log in
<% end %>
<% end %>
I have the partials set up in application.html.erb:
<ul class="nav navbar-nav navbar-right">
<%= render 'devise/menu/registration_items' %>
<%= render 'devise/menu/login_items' %>
</ul>
The error I'm getting is:
undefined method `to_sym' for {:span=>"test", :class=>"glyphicon glyphicon-log-out"}:Hash
Did you mean? to_s
to_yaml
to_set
and is highlighting
<%= content_tag(:span => 'test', :class => 'glyphicon glyphicon-log-out') %>
I don't know how to fix it, I've tried using the span class as HTML code but that wasn't working either. The original code works in the application.html.erb file.
I'm assuming it doesn't know how to convert into a symbol as that's part of Bootstrap.
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<!--<a class="navbar-brand" href="#">Navbar</a>-->
<%= link_to 'A2Z.ie', home_path, :class => 'navbar-brand' %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li> --> <!-- Dropdown links not working with partials. -->
<li class="nav-item">
<!-- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> -->
<%= link_to 'Home', home_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Locations', locations_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Departments', departments_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Employees', employees_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Products', products_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Customers', customers_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Payments', payments_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Orders', orders_path, :class => 'nav-link' %>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<%= render 'devise/menu/registration_items' %>
<%= render 'devise/menu/login_items' %>
</ul>
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</nav>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<div class="container">
<%= yield %>
</div>
</body>
</html>
https://apidock.com/rails/ActionView/Helpers/TagHelper/content_tag
You need to structure it like this:
<%= content_tag(:span, 'test', :class => 'glyphicon glyphicon-log-out') %>
Or with the new ruby syntax:
<%= content_tag(:span, 'test', class: 'glyphicon glyphicon-log-out') %>
Created images folder
Added the "glyphicon glyphicon-user" and "glyphicon glyphicon-log-in" images from examples on getbootstrap.com, used image link in link_to, e.g.
<%= link_to image_tag("Search.png", :border=>0), destroy_user_session_path, :method => :delete, :class => 'nav-link' %>
UPDATE
You are using Bootstrap 4.3.x which dropped the usage of Glyphicon. You should use FontAwesome like they suggest here. That's why it doesn't work!
You should use this:
content_tag(:span, "test", class: ["glyphicon", "glyphicon-log-out"])
UPDATE 2: RAILS 5 & Font Awesome
Please try this:
Add:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
to your application.html.erb file after the last stylesheet_link_tag tag.
And modify the following file like this:
# app/devise/user/_login_items.html.erb
<% if user_signed_in? %>
<%= link_to destroy_user_session_path, :method => :delete, :class => 'nav-link' do %>
<i class="fas fa-sign-in-alt"></i> Sign out
<% end %>
<% else %>
<%= link_to 'Log in', new_user_session_path, :class => 'nav-link' do %>
<i class="fas fa-sign-out-alt"></i> Log in
<% end %>
<% end %>
I hope this helps!
PS: Never give up!

App name in the navbar

I am creating a sample app as a learner. How do I fix the code below to have "One Month Rails" appear on every page of my app, in the left of my navigation bar? Thank you!
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<% link_to "One Month Rails", root_path, class: "brand" %>
<div class="nav-collapse">
<ul class="nav">
<li>
<%= link_to 'Home', root_path %>
</li>
<li>
<%= link_to 'About', about_path %>
</li>
</ul>
<ul class="nav pull-right">
<% if user_signed_in? %>
<li><%= link_to "Edit Profile", edit_user_registration_path %></li>
<li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to "Login", new_user_session_path %></li>
<% end %>
</ul>
</div>
</div>
</div>
This will work for you...
<%= Rails.application.class.parent_name %>
Or more specifically...
<%= link_to Rails.application.class.parent_name, root_path, class: "brand" %>
Don't forget the equals sign in front of the link_to call.

twitter bootstrap navbar collapse on my rails app

I don't seem able to get navbar collapse to work on my rails app
application.html.erb is
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/stylesheets/bootstrap-responsive.css" rel="stylesheet">
<%= analytics_init if Rails.env.production? %>
<title>Guidelines for Me</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<script type="text/javascript">
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
function clearText(){
search = $('.search-query');
if (search.defaultValue==search.value)
search.value = ""
}
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<% if Guideline.count % 100 ==0 %>
<%= link_to "#{Guideline.count}" " guidelinesforme available - yay!", guidelines_path, :class => 'brand' %>
<% else %>
<%= link_to "#{Guideline.count}" " guidelinesforme available!", guidelines_path, :class => 'brand' %>
<% end %>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
List guidelines by...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "...Topic", topics_path %></li>
<li><%= link_to "...Hospital", hospitals_path %></li>
<li><%= link_to "...Specialty", specialties_path %></li>
</li>
</ul>
<% if user_signed_in? %>
<li><%= link_to "Favourites", favourites_path %></li>
<% else %>
<li><%= link_to "Favourites", register_path %></li>
<% end %>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<% if user_signed_in? %>
<%= current_user.first_name %>
<% else %>
Log in or Sign up
<% end %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<% if user_signed_in? %>
<li ><%= link_to "Edit profile", edit_path %></li>
<li> <%= link_to "Log out", logout_path %></li>
<li> <%= link_to "My additions", profiles_show_path(id: current_user.profile_name) %></li>
<% else %>
<li><%= link_to "Log in", login_path %></li>
<li><%= link_to "Sign Up", register_path %></li>
<% end %>
<li><%= link_to "About us", about_path %></li>
</li>
</ul>
<li class="nav pull-right">
<%= form_tag guidelines_path, :class => 'navbar-search pull-right', :onSubmit=>"clearText(this)",:method => :get do %>
<%= text_field_tag :search, params[:search], :class => 'search-query input-small', :placeholder=>"Search", :ONFOCUS=>"clearDefault(this)" %> <% end %></li>
</ul>
</div>
</div>
</div>
<div class="container">
<% flash.each do |type, message| %>
<div class="alert <%= flash_class type %>">
<button class="close" data-dismiss="alert">x</button>
<%= message %>
</div>
<% end %>
<%= yield %>
</div>
</body>
<script src="/assets/js/bootstrap-dropdown.js"></script>
</html>
in my application.js
$(".collapse").collapse()
I'm not using the bootstrap gem, I just added bootstrap manually. I'm not sure if it's an issue with the plugin requirement or how to solve this.
Thanks
you need add
<script src="/assets/js/bootstrap-dropdown.js"></script>
at the end of the template
and
$(".collapse").collapse()
is inside of your_scripts.js not in your style.css file

Resources