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
Related
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 %>
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!
I am learning Ruby on Rails from Code4Startup. This piece of code was copied from the complete code, which you can check right below. This portion of code is causing an error:
"syntax error, unexpected keyword_ensure, expecting end-of-input"
"Extracted source (around line #104):
102 "< /html >"
<ul class="side-nav" id="mobile-demo">
<li>Courses</li>
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<li><%= link_to "Login", new_user_session_path %></li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown2"><%= current_user.email %> <i class="mdi-navigation-arrow-drop-down right"></i></a></li>
<% end %>
</ul>
Now if I remove this code, It works. I don´t know what is wrong, or even if this piece of code is affecting other parts of the code.
Complete Code
<!DOCTYPE html>
<html>
<head>
<title>Code4Pro</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li>
</ul>
<header>
<nav class="brown lighten-4 z-depth-2">
<div class="container">
<div class="nav-wrapper">
Code4Pro
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Courses</li>
<% if(!user_signed_in?) %>
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<li><%= link_to "Login", new_user_session_path %></li>
<% else %>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1"><%= current_user.email %> <i class="mdi-navigation-arrow-drop-down right"></i></a></li>
<% end %>
</ul>
</div>
</div>
</nav>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Courses</li>
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<li><%= link_to "Login", new_user_session_path %></li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown2"><%= current_user.email %> <i class="mdi-navigation-arrow-drop-down right"></i></a></li>
<% end %>
</ul>
</div>
</div>
</nav>
</header>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<main>
<div class="container">
<%= yield %>
</div>
</main>
<footer class="page-footer brown lighten-4">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Code4Pro</h5>
<p class="grey-text text-lighten-4">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Social</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Twitter</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Facebook</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Google Plus</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2015 Copyright Haruo
<%= link_to "About us", pages_about_path, :class => "" %>
</div>
</div>
</footer>
</body>
<script>
$(".button-collapse").sideNav();
$(".dropdown-button").dropdown();
</script>
</html>
Thanks!
The <% end %> code doesn't look like it is ending anything.
You could delete it, but judging by the full code sample you posted, the intention may be to do this:
<ul class="side-nav" id="mobile-demo">
<li>Courses</li>
<% if(!user_signed_in?) %>
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<li><%= link_to "Login", new_user_session_path %></li>
<!-- Dropdown Trigger -->
<% else %>
<li><a class="dropdown-button" href="#!" data-activates="dropdown2"><%= current_user.email %> <i class="mdi-navigation-arrow-drop-down right"></i></a></li>
<% end %>
That is, create a conditional for: "if user is not logged in" display registration/log in links "else" activate dropdown.
It looks like you've got an <% end %> tag without a block opening it, so if you remove it you should be good.
<li><a class="dropdown-button" href="#!" data-activates="dropdown2"><%= current_user.email %> <i class="mdi-navigation-arrow-drop-down right"></i></a></li>
<% end %>
New to Rails and getting this error:
SyntaxError in RestaurantsController#index
/home/action/workspace/yelp_demo/app/views/layouts/_navbar.html.erb:40: syntax error, unexpected keyword_ensure, expecting end-of-input
but the error, I think is here:
app/views/layouts/application.html.erb:12:in `_app_views_layouts_application_html_erb___1775868341330703453_36033920'
So here's the application.html.erb code:
<!DOCTYPE html>
<html>
<head>
<title>Yelpdemo</title>
<%= render 'layouts/bootstrap' %>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'layouts/navbar' %>
<div class="container-fluid">
<% flash.each do |name, msg| %>
<% if msg.is_a?(String) %>
<div class="alert alert-<%= name == "notice" ? "success" : "danger" %> alert-dismissable">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
</div>
<% end %>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
Here's my _navbar.html.erb:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Yelpdemo", root_path, class: "navbar-brand" %>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "About", pages_about_path %></li>
<li><%= link_to "Contact", pages_contact_path %></li>
</ul>
<%= form_tag search_restaurants_path, method: :get, class: "navbar-form navbar-left" do %>
<p>
<%= text_field_tag :search, params[:search], class: "form-control" %>
<%= submit_tag "Search", name: nil, class: "btn btn-default" %>
</p>
<% end %>
<% end %>
<ul class="nav navbar-nav navbar-right">
<% if user_signed_in? %>
<li><%= link_to "Edit Profile", edit_user_registration_path %></li>
<li><%= link_to "Sign out", destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to "Sign up", new_user_registration_path %></li>
<li><%= link_to "Sign in", new_user_session_path %></li>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I'm sure I'm missing something here...but what? TIA for your help!!
Looks like you have an extra <%end%> in your _navbar.html.erb file.
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.