bootstrap drop down not dropping down - javascript

I am trying to get a bootstrap drop down menu to work but I seem to have something going wrong. Here is my html:
<head>
<meta charset="utf-8">
<title>memberpage</title>
<link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu test" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
I get the button to show up but when I click it I don't get anything. I am using the default js and css files from bootstrap. I am want it to be just an normal drop down menu.
[EDIT] okay so after adding the jquery here is my code.
<head>
<meta charset="utf-8">
<title>memberpage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
I am still getting nothing from the page. I get the button but nothing else. no dropdown nor any response from the page.

You forgot jquery,
Add this before bootstrap.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Quoting from Bootstrap Javascript ,
Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).
This works well for me:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
</body>
I am just using CDN for the files. Fiddle

You did not include js file.Please check all script link, is it ok or not.I just include js file and its working for me.Take a look WORKING FIDDLE.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Related

Bootstrap tabs with dropdown is broken

I followed the tutorial on official site of Bootstrap, and at this page is a simple example how to use tabs with dropdowns menu bootstrap example
And it works on this page, but when I add this code to codepen or to my project it doesn't work. All bootstrap dependencies are added. But I noticed some weird thing that when I use previous version, such as 3.4.0, it works fine, without issues, but with new version 4.3.1 - dropdown menu doesn't expanding. Maybe I'm doing something wrong.
This example from the bootstrap official site in my codepen page, please follow this link and give me some advices. Codepen example.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#logs"
role="tab" aria-controls="logs" aria-selected="true">
Logs
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#scriptMessage"
role="tab" aria-controls="scriptMessage" aria-selected="false">
Scripts/Messages
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Submenu 1-1</a>
<a class="dropdown-item" href="#">Submenu 1-2</a>
<a class="dropdown-item" href="#">Submenu 1-3</a>
</div>
</li>
</ul>
Thank you guys for your help!. I forgot to add one more dependency, Popper.js or Bootstrap Bundle js (Popper is already included), to my project, but now it works correctly.
Bootstrap has its own JavaScript for some functionalities:
Go to this link
Copy the 'Complete JavaScript Bundle' link
Paste that link to your code pen like this: Pen Settings screenshot (You must add it AFTER JQuery)
The bundle already comes with the needed functions for Bootstrap. You just have to add that and JQuery.
You can see which Js dependencies are needed for each bootstrap components and more info on how to add those dependencies to your project here
your code is working fine use the links like below or check your updated codepen here
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#logs"
role="tab" aria-controls="logs" aria-selected="true">
Logs
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#scriptMessage"
role="tab" aria-controls="scriptMessage" aria-selected="false">
Scripts/Messages
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Submenu 1-1</a>
<a class="dropdown-item" href="#">Submenu 1-2</a>
<a class="dropdown-item" href="#">Submenu 1-3</a>
</div>
</li>
</ul>
Check here working demo and yes you can copy css and js as per requirement from this demo.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h3>Tabs With Dropdown Menu</h3>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
some of bootstrap component need javascript code for actions. In your case you need to put default js bundle before closing body tag.
https://codepen.io/error-yatish/pen/aXgLKg?editors=1000
for reference use https://getbootstrap.com/docs/4.3/getting-started/introduction/#js
You missed the jQuery library.
and dropdown popup on click
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src=""></script>
</head>
<body>
<div class="container">
<h3>Tabs With Dropdown Menu</h3>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</body>
</html>

How can I link input textbox and dropdown in html

I want to use bootstarp select and an input textbox. When I type in textbox it should suggest entries of bootstrap select element. I want to use javascript, jQuery and json. How shall I do this?
I would suggest you to use some plugin for the purpose.
Have a look at https://select2.github.io/examples.html
Include following lines into your head section of page and start coding:
Links:
bootstrap.min.css,
jquery.min.js,
bootstrap.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="javascript">
$(document).ready(function() {
//Write your jquery code here
});
</script>
</head>
<body>
<div class="container">
<h2>Form control: input</h2>
<p>The form below contains two input elements; one of type text and one of type password:</p>
<form role="form">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a>
</li>
</ul>
</div>
</form>
</div>
</body>
</html>

Bootstrap Dropdown Button Problems

So I have just started playing around with bootstrap, and when I try to fallow the example per Getbootstrap's component page the button doesn't want to work as advertised. I have seen and now tried a number of different solutions to this problem which has me thinking that I maybe over thinking what is wrong here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rubish</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="maindev1.0.0.css" />
<link rel="stylesheet" type="text/css" href="navbardev1.0.0.css" />
</head>
<body>
<div class="navbar-header pull-right">
<button id="menubutton" class="btn btn-default btn-md dropdown-toggle" data-toggle="dropdown"
type="button" aria-expanded="false"><span class="glyphicon glyphicon-list"></span> </button>
</div>
<ul class="dropdown-menu" role="menu">
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
</ul>
</body>
</html>
I can get the button to show up and it looks like its active when I click it but it can not get the drop down to appear. I have tried it with Safari, Chrome, and Firefox with the same result in all three. Is there something that I am forgetting?
You don't say if it is in a navbar or just a normal one. From your code it looks like you are trying top do it in a navbar. I also included a normal dropdown button.
fiddle: https://jsfiddle.net/DTcHh/8607/
<!-- Normal Single Dropdown button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
select {background-color: blue; color: white; border: 2px solid; border-radius: 6px;}
<select name="yada">
<option value="yada">yada</option>
<option value="yada">yada</option>
<option value="yada">yada</option>
<option value="yada">yada</option>
</select>
Why not just replace the button with a dropdown like this and then style it to look like a button?

Twitter Bootstrap drop down menu is not working

I have included twitter bootstrap css and js files, and then using the following Javascript code, I want to applyn drop down effect to the the HTML markup. But it does not work, neither does show any error in console. Please helpe me.
I have included:
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/game/public/css/bootstrap-responsive.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/game/public/css/bootstrap.min.css">
<script src="http://localhost/game/public/js/bootstrap.min.js"></script>
<script src="http://localhost/game/public/js/bootstrap-datepicker.js"></script>
And this is the Javascript:
<script type="text/javascript">
$(document).ready(function(){
$('.nav').dropdown();
});
</script>
And this is the Markup:
<ul class='nav nav-pills pullright'>
<li class="btn btn-navbar">خانه کاربری</li>
<li class="btn btn-navbar"><a class="dropdown-toggle" href="#">سفارش جدید</a>
<ul class="dropdown-menu nav-collapse">
<li class="btn btn-navbar">سفارش بازی
<ul>
<li class="btn btn-navbar">Counter Strike
</ul>
<li>
</ul>
</li>
<li class="btn btn-navbar">سفارش بازی</li>
<li class="btn btn-navbar">فهرست سفارش ها</li>
<li class="btn btn-navbar" >فهرست پرداخت ها</li>
<li class="btn btn-navbar">ثبت فیش پرداختی</li>
<li class="btn btn-navbar">حساب کاربری</li>
<li class="btn btn-navbar">تغییر رمز عبور</li>
<li class="btn btn-navbar">خروج</li>
</ul>
You don't need any javascript, just include the bootstrap css and js files in your pages.
You can see an example of the dropdown component here :
http://getbootstrap.com/components/#btn-dropdowns

Bootstrap dropdown doesn't work?

Bootstrap dropdown isn't working for me. I did everything correctly as you can see it there:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test site | Jony</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing website coded by Jony - rapture-gfx" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/flexslider.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="js/jquery.flexslider.js"></script><!-- Place in the <head>, after the three links --> <script type="text/javascript" charset="utf-8">$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" });});</script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</head>
<header>
<div class="header">
<div class="container">
<ul class="menu">
<li class="current"><span style="color: #bde2e1;">Home</li>
<li class="dropdown"><a class="dropdown-toggle" href="#">Servers</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
Bootstrap is a ready framework with features like grid system, rows, ready js menus and more.
There's an explanation of how it works:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
It doesn't work for me.
Yes, my src links correctly to the JS files.
your missing the body in your html.
put your script at the bottom of the page or after ready:
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>
demo: http://jsfiddle.net/rLL75/
EDIT:
use a newer version of jquery.
<header>
<div class="navbar navbar-static header">
<div class="navbar-inner container">
<ul class="nav" role="navigation">
<li class="brand"><span style="color: #bde2e1;">Home</span></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
<div id="logo"><img src="img/logo.png" /></div>
</div>
</div>
</header>
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>

Categories