Drop down Menu selected Value using jQuery,Bootsrap - javascript

Please i have few dropdowns on my page. I am trying to change selected values and is having a great problem with that. Nothing seems to fire. It seems like my jquery code is not called at all or does it work ?.
I added my drop down in an mvc view that is embedded in a Layout page. Previously i added my Java script code in the layout page header like below.
<script type="text/javascript">
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
</script>
Below is my my Drop down from my view rendered on my LayoutPage #RenderPage
<div class="btn-group">
<a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown"> <span data-bind="label">Select a Country</span>
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li>United States</li>
<li>Canada</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-star"></span> Other</li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown"> <span data-bind="label">Select a State</span>
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li>Washingtong</li>
<li>California</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-star"></span> Other</li>
</ul>
</div>
I tried many alternatives as shown in the question Here and didnt succeed. Please where do i go wrong? Any help would be appreciated


Thanks guys, have found the issue . Just like i suspected my javascrip code was not executing. I just realized my script was written before the jQuery.js script reference. That is like
<script type="text/javascript">
My script .
</script>
<script src="~/Content/js/bootstrap.min.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
I now change it to
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type="text/javascript">
My script .
</script>
Its now working. So JQuery has to be reference/loaded first. That was the mistake i made. Thank you all.

Related

change the label of a button with class=“btn dropdown-toggle” using javascript or css

Hi I pasted the code below I am beginner in html css and javascript I wanted to change the label of a button without id right now its label is login I wanted to change it to admin is it possible can I use javascript or css? I will really appreciate any advice thank you
</div>
<div class="nav-no-collapse header-nav"><ul class="nav pull-right">
<li class=""><a class="btn" href=""><i class="fa fa-home"></i></a></li>
<li class="user-link dropdown">
<a data-toggle="dropdown" class="btn dropdown-toggle">
<i class="fa fa-user white"></i> Login //this part I wanted to change it to admin
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-title"><span>Account Settings</span></li>
<li><i class="fa fa-user"></i> Profile</li>
<li><i class="fa fa-power-off"></i> Logout</li>
</ul></li></ul></div>
I tried using a javascript like this

I am not sure if I understand your question because you are not using punctuation, so it is really hard to read. But if it should be about simply changing the Login to Admin without touching the html, your jQuery should be like:
<script>
$(document).ready(function() {
$(".dropdown-toggle").text("Admin");
});
</script>

Firstly you need to use jquery..
Then you can use this
$(document).ready(function(){
$('.fa-user').html('Admin');
});

Click Dropdown Menu Mobile Not Working

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown">
<a class=dropdown-toggle data-toggle=dropdown href="#">
<i class=material-icons>Button</i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li><i class=ti-user></i> Profile</li>
<li><i class=ti-layout-sidebar-left></i> Logout</li>
</ul>
</li>
Everything works fine in the browser even when shrinking it. But when I try to click a submenu HREF doesn't work it just closes the drop-down menu it doesnt redirect...

This is the official and proper way to make a bootstrap 3.3.7 dropdown button
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another Link</li>
</ul>
</div>
Reference bootstrap 3 - drop-down button
And also load the js file before the closing body tag. Working demo

Title of navbar dropdown won't change when item is clicked

I have searched through all of the questions related to this that I can find and I just can't seem to make the text change.
Here is the dropdown in question:
Marketsource
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav">
<!--First Dropdown - This needs to be fixed. Should change the text when clicked to the store that was selected.-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><span id="StoreType">Store Type</span></a>
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100" onclick="setStoreType(100);" >Best Buy</a>
<a class="dropdown-item" id="101" onclick="setStoreType(101);" >Office Deopt</a>
<a class="dropdown-item" id="102" onclick="setStoreType(102);" >Office Max</a>
<a class="dropdown-item" id="103" onclick="setStoreType(103);" >Staples</a>
<a class="dropdown-item" id="104" onclick="setStoreType(104);" >Costco</a>
</div>
</li>
I included the part for the navbar because the way I have it setup currently doesn't seem to quite match any of the examples I have seen.
Javascript that I have right now (I've gone through quite a few variations on something similar):
//Dropdown toggle
$(".dropdown-menu a").click(function(){
$(this).closest('.dropdown-item').children('a').text($(this).text())
});
Can someone assist me with my issue? It's not super important but it's something that would give this webapp a little more responsiveness.
Thank you!
EDIT:
I realize it's been a little bit since I asked this, but I still haven't been able to get it to work. I put the two files that are needed into a Github Gist here:
JS: https://gist.github.com/ChristopherBare/bd29ba9bc4ffea9953c3039acc03f81d
HTML: https://gist.github.com/ChristopherBare/b2770b00881b978af3b666ba67c0e4b1
I don't know whats going on with it. If someone can just look over the files and tell me where I went wrong, that would help tremendously.
P.S. There are a couple functions in the JS that don't really do anything yet because they aren't done. So just ignore that for now.

The issue is here:
$(this).closest('.dropdown-item').children('a').text($(this).text());
and th html is like:
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100" onclick="setStoreType(100);" >Best Buy</a>
here .dropdown-item is under .dropdown-menu and you are using closest() selector, which search for the DOM upwards. Instead of closest try find() and also remove .children('a') as .dropdown-item is itself an anchor.

Not sure if this is what you are looking for but you could do it simply without that extra setStoreType function.(though I am not sure what you are trying to do with that function so i skipped it.)
If you wanted to the id as the store type and not the text inside the link I can add that later.
//Dropdown toggle
/*
$(".dropdown-menu a").click(function(){
$(this).closest('.dropdown-item').children('a').text($(this).text())
});
*/
function setStoreType(){
}
//Dropdown toggle
$(".dropdown-item").on("click", function(){
$("#StoreType").text($(this).text());
});
.dropdown-item:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav">
<!--First Dropdown - This needs to be fixed. Should change the text when clicked to the store that was selected.-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><span id="StoreType">Store Type</span></a>
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100">Best Buy</a>
<a class="dropdown-item" id="101">Office Deopt</a>
<a class="dropdown-item" id="102">Office Max</a>
<a class="dropdown-item" id="103">Staples</a>
<a class="dropdown-item" id="104">Costco</a>
</div>
</li>

I still haven't found an answer to this issue. I have posted some github gists so that all of the code is there. It is something to do with jQuery not working properly, or possibly the way that I have my dropdown formatted?

Angularjs bootstrap dropdown not working

Am bit new to angularjs and bootstrap.
Am trying to add a simple dropdown. But it is not working.
Tried out the suggestion # Bootstrap 3 simple dropdown not working. That is also not working.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" ui-sref="a">a<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
<li><a ui-sref="e">e</a></li>
<li><a ui-sref="f">f</a></li>
<li><a ui-sref="g">g</a></li>
<li><a ui-sref="h">h</a></li>
<li><a ui-sref="i">i</a></li>
<li><a ui-sref="j">j</a></li>
<li><a ui-sref="k">k</a></li>
</ul>
</li>
Complete code # http://plnkr.co/edit/uFDFOJfHjL5qY9nVEykq?p=preview
Hope someone would help me out.

NOTE: Most answers here are outdated! The main issue is that the dropdown directive is not available as a class anymore, but only as an attribute, and that it has been renamed to uib-dropdown.
I was stuck here for a while, but changing the class into an attribute worked as a charm.
Also, you need to use the 'uib-' prefix for each directive instead of plain names.
<li uib-dropdown>
<a uib-dropdown-toggle>a<span class="caret"></span></a>
<ul uib-dropdown-menu>
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
</ul>
</li>
(And of course, make sure you did not forget to include the ui.bootstrap module in your app.)
var app = angular.module('App', ['ui.router','ui.bootstrap']);

You need to include ui.bootstrap module in your app.
var app = angular.module('App', ['ui.router','ui.bootstrap']);
and also remove ui-sref from the dropdown trigger.
<a class="dropdown-toggle" data-toggle="dropdown" >a<span class="caret"></span></a>
Plnkr

data-toggle="dropdown" should be removed. I guess it creates some conflict with ui.bootstrap
<li class="dropdown" uib-dropdown>
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" uib-dropdown-toggle href="" role="button">
<span class="glyphicon glyphicon-flag"></span>
Events
<span class="caret"></span>
</a>
<ul class="uib-dropdown-menu" role="menu">
<li>
Event 1
</li>
<li>
Event 2
</li>
</ul>
Hope this helps.

You need to add on-toggle to your anchor tag, to avoid conflicts between bootstrap dropdown angular dropdown class, this issue is a closed on angular-ui(https://github.com/angular-ui/bootstrap/issues/2156)

I found a great resource from here regarding the subject, as I had the same issue. I'll outline what I did below.
Download ui bootstrap
Move zipped file to target directory for app, and unzip
locate the latest edition of the ui bootstrap release, which in my case, is located at "bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js"
Include the minified js file in your main .html file:
<script src='stylesheets/bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js'></script>
Go back to Angular directives and scroll down to the dropdown section. Copy their javascript into your primary js file and html samples and customize as usual
That's what did it for me. Hope that helps anyone else with the same issue.

First make sure you included ui.bootstrap module in your app
var app = angular.module('App', ['other inclusions','ui.bootstrap']);
Then if the problem still persists don't use dropdown-toggle and dropdown as directives. Instead use as class. i.e. class = 'dropdown-toggle' etc.
For Example :
<div class="dropdown dropdown-append-to-body">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle = "dropdown">Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
Refer this issue.
https://github.com/angular-ui/bootstrap/issues/2156

Worked out pretty simple the solution (after trying to find it for ages) Simply add "dropdown-toggle" directive to your button
<button class="btn btn-primary " dropdown-toggle type="button">Drop Me Down<span class="caret"></span></button>

Well, I noticed that the attribute "dropdown" need to be added to the li element, once that is added, everything will be fine.
<li class="dropdown" dropdown>
... <span class="caret"></span>
<ul class="dropdown-menu">
...
</ul>
</li>

for Angular 2:
add npm install ng2-bootstrap --save
then follow the example from GITHUB:
https://github.com/valor-software/ng2-bootstrap/tree/development/demo/components/dropdown

Bootstrap Select Display Bug

I'm using Silvio Moreto's BootStrap library and it's not displaying the select properly.
Here is a screen shot of the problem.
My guess is I am doing something wrong. I don't know what's causing this issue, but I checked
my javascript load order and that seems fine.
Below is the html I execute the code on.
<select name="action_type" class='selectpicker'>
<option value="phone">call</option>
<option value="email">email</option>
<option value="url">open to url</option>
</select>
This is the expanded form after selectpicker() is executed.
<div class="btn-group bootstrap-select">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown">
<div class="filter-option pull-left">call</div>
<div class="caret"></div></button><div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu">
<li rel="0" class="selected"><a tabindex="0" class="" style=""><span class="text">call</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="1"><a tabindex="0" class="" style=""><span class="text">email</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="2"><a tabindex="0" class="" style=""><span class="text">open to url</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
</ul>
</div>
</div>
Anyone have any idea what's going on? I presume it could be the CSS.
Update::
I only use certain parts of the bootstrap framework because there's a lot that I don't need. I use version 2.3.2 of button, form, and dropdown js/css, but, for some reason, it isn't enough for bootstrap selector.
Here is a picture using only bootstrap 3.0 sources from the test file.
Thanks!

Have you initialized the jQuery libray and told it which elements to apply the changes to?
From the libraries docs...
$('.selectpicker').selectpicker();
You will need to do this on document.ready

Categories