Twitter Bootstrap drop down menu is not working - javascript

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

Related

Losing javascript functionality due to Bootstrap Tabs incompatibility

I'm working from VS2015, JQuery 2.2.4 and Bootstrap 3.3.7, having issues with Bootstrap tabs component, since my dropdowns menu are not being displaying when I click over them. I have 5 tabs in total, with some tabs the dropdown objects at header & footer works properly but if click on other tabs then they stop working
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<environment names="Development">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/header.css" />
<link href="~/css/Video.css" rel="stylesheet" />
<link href="//vjs.zencdn.net/6.2.0/video-js.min.css" rel="stylesheet"/>
<link rel="shortcut icon" href="~/images/favicon_azul-gris32px.png" />
</environment>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="~/lib/bootstrap-treeview/src/js/bootstrap-treeview.js"></script>
<script src="//vjs.zencdn.net/6.2.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.8.0/videojs-contrib-hls.min.js"></script>
<script src="~/js/site.js"></script>
DROPDOWN:
<li class="dropdown">
<a id="username_dropdown" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
#UserManager.GetUserAsync(User).Result.Name
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="dropdown-account">
<li id="menu-li-group">
<a asp-area="" asp-controller="Groups" asp-action="Index">
<img id="img-li-group" class="menu-icons-account" src="~/images/home-usermenu/UM_groups_inactive.png" />
#Localizer["Groups"]
</a>
</li>
<li id="menu-li-users">
<a asp-controller="ApplicationUsers" asp-action="Index">
<img id="img-li-users" class="menu-icons-account" src="~/images/home-usermenu/UM_users_inactive.png" />
#Localizer["Users"]
</a>
</li>
<li id="menu-li-log">
<a asp-area="" asp-controller="LogAdminTasks" asp-action="Index">
<img id="img-li-log" class="menu-icons-account" src="~/images/home-usermenu/UM_log_inactive.png" />
#Localizer["Activity Log"]
</a>
</li>
<li id="menu-li-profile">
<a asp-area="" asp-controller="Manage" asp-action="ChangePassword">
<img id="img-li-profile" class="menu-icons-account" src="~/images/home-usermenu/UM_edit_inactive.png" />
#Localizer["Modify Profile"]
</a>
</li>
<li id="menu-li-openapp">
<a id="openNac" style="cursor: pointer;">
<img id="img-li-openapp" class="menu-icons-account" src="~/images/home-usermenu/UM_sharimg_inactive.png" />
#Localizer["Open Sharimg"]
</a>
</li>
<li id="menu-li-logoff">
<a style="cursor: pointer;">
<img id="img-li-logoff" class="menu-icons-account" src="~/images/home-usermenu/UM_logout_inactive.png" />
<button id="btn_submit" type="submit" style="color:black" class="btn btn-link pull-right">#Localizer["Log off"]</button>
</a>
</li>
</ul>
</li>
Before I also loosed javascript functionality for Bootstrap tooltip and mouse over icons
there was no kind of incompatibility between my version of Bootstrap and Jquery.
I had 2 issues:
1- I was loading all the js libraries before closing the <body> tag in the main layout .cshtml file, so I cannot execute Jquery code in partials views, I just changed location after the <header> where I load all the .js files
2 - Due to this error I tried to load again all JS files in the partial view, despite this doesnt show any error in the console it stops some functionality as the Bootstrap Dropdown menu did

bootstrap drop down not dropping down

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>

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?

Javascript with XSL

I'm trying to make dropdown using Bootstrap framework. This is how I did:
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
</div>
Just like in example. And this is how I include .js in xsl:
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"> </script>
So the menu doesn't work. I see few buttons, but no dropdown effect.
You must also include jQuery and bootstrap css:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Don't forget to include jQuery BEFORE bootstrap js.

action on dropdown itemselect in bootstrap css

I created one dropdown list using bootstrap css
I want to change the color of label when item in dropdown menu selected. But here i dont know why the dropdown items are not visible
CODEPEN DEMO
<label> Test color </label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>yellow</li>
<li>green</li>
<li>black</li>
<li class="divider"></li>
<li>red</li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
How can I change the color of label when color is selected from the menu?
UPDATED CODE:
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<label>Test color</label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-default">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>yellow
</li>
<li>green
</li>
<li>black
</li>
<li class="divider"></li>
<li>red
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</body>
</html>
It looks like something is wrong with the way you've included Bootstrap 3 on your codepen.
The dropdown shows fine on Bootply using Bootstrap 3.0.3: http://bootply.com/103458
You can change the label text color with something like this:
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$('label').css('color',selText);
});

Categories