DropDown Login form for bootstrap 3.0

jquery html css ruby-on-rails twitter-bootstrap

11,430

In your application.html.erb file you can put script elements in head.

<head>
<title>.....</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script>
 $(document).ready(function()
 {
   //Handles menu drop down`enter code here`
   $('.dropdown-menu').find('form').click(function (e) {
    e.stopPropagation();
    });
  });
  </script>
</head>

However javascript are generally written in the app/assets/javascript directory and then imported with this code <%= stylesheet_link_tag "application", :media => "all" %> in the head tags of application.html.erb file.

EDIT:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

I tried using these two js files instead and they worked for me, jquery from google and the whole bootstrap javascript file from Bootstrap CDN.

To get "InYourShoes" to be aligned in the left you can use :class => "navbar-brand".

<%= link_to "InYourShoes" , '#', id: "logo", :class => "navbar-brand" %>

11,430

Author by

Apprentice Programmer

Self Learning Python, Ruby and PHP. Interests: to develop my abilities to make games on IOS and Android platform

Updated on June 04, 2022

Comments

Apprentice Programmer almost 2 years

I'm not sure if this works for 3.0, but this is the one im following:http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/

I'm using ruby on rails 4.0 and this snippet of code is my from my views/layouts/_header file

<header class = "navbar  navbar-fixed-top navbar-inverse ">
  <div class = "navbar-inner">
  <div class = "container">
<%= link_to "InYourShoes" , '#', id: "logo" %>
<nav>
 <ul class = "nav navbar-nav navbar-right">
   <li><%= link_to "Home", '#'%></li>
   <li><%= link_to "Help", '#'%></li>
   <li><%= link_to "Sign up", '#'%></li>
   <li class = "dropdown">
    <a class = "dropdown-toggle" href = "#" data-toggle = "dropdown"> Sign In<strong class "caret"></strong></a>
    <div class="dropdown-menu" style = "padding: 15px; padding-bottom: 0px;">
     <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
        <input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
        <input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
        <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
        <label class="string optional" for="user_remember_me"> Remember me</label>
        <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
       </form>
      </div>
      </li>
     </ul>
     </nav>
     </div>
    </div>
   </header>

after browsing around for solutions i found a old post relating to this but i have no idea where to these 2 lines of code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>

and

  <script>
 $(document).ready(function()
 {
   //Handles menu drop down`enter code here`
   $('.dropdown-menu').find('form').click(function (e) {
    e.stopPropagation();
    });
  });
  </script>

This is my first website, and i appreciate the help. I know rails has coffescript but i never got around a tutorial that used it yet. Thanks!

Apprentice Programmer over 10 years

i added the lines into my application file and when i click the signin button, the dropdown still doesn't work. Any suggestions?
Pierre over 10 years

Change the two javascript files to the ones i added in my answer and it should work.
Pierre over 10 years

If you want you "InYourShoes" to be aligned in the header add the code a provided in my answer. :)