I am trying to use bootstrap 3's dropdown functionality like a select menu. We will eventually be adding a lot of custom functionality, so we decided to use the dropdown menu instead of the actual select component. My issue is that I'm unable to capture clicks on the various menu items.
Here's my HTML:
<div class= "dropdown item-select" id="item-select-1">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
Select Item 1<span class="glyphicon glyphicon-menu-down"></span>
</button>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
and my Javascript:
$('#item-select-1 a').on('click', e => {
console.log('hello');
});
But nothing happens when a menu item is clicked; nothing is logged to the console. Am I overlooking something obvious? TIA!
EDIT: I've disabled all other Javascript except for the following. It might? be significant that the options are not hardcoded into the html; they're dynamically populated in response to the value of another dropdown:
$('#category-select').change(e => {
const opts = state.itemOptions[e.target.value];
$('.item-select ul').empty().append(opts);
$('#item-select-1 button').prop('disabled', false);
}
And the category selector is like this:
<select id="category-select" required="required" name="venue" class="form-control">
<option>Select Category</option>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
<option>Category 4</option>
</select>
EDIT 2: Alright, so I ran an experiment. I enabled the dropdown on load and hardcoded some options:
<li>AAAAAA</li>
<li>BBBBBB</li>
<li>CCCCCC</li>
And it worked. I guess the issue is the dynamically loaded options. So I guess I have to re-register the event handlers every time I repopulate the menu options?
Your code is correct.
Where is your JavaScript script located? Maybe it's not imported to your HTML file properly.
By binding the click handler to an element that is part of the initial load, I am able to capture the click. e.target will give me the exact option that was clicked on:
$('#venue-select-1 ul').on('click', e => {
console.log(e.target.innerText);
});
Related
Is it possible to change look of bootstrap tabs to have dropdown select instead of standard tabs made with <ul> and <li>
I have relatively small area (like col-3) where I need to display tabs with lot of tabs (like 7-10 tabs), but it looks ugly on small screens as it span to 3-4rows.
I would like to use select dropdown (maybe some jquery addons for slecet) where I would always use that dropdown to select tab.
It needs to be <select> as I want to show all the time selected tab (standard bootstrap dropdown, dont do it, it just offers options but not showing what is selected).
You might want to hide <ul> and <li> and just trigger them by <select>
Here's an example:
<ul class="nav nav-tabs">
<li hidden>Menu 1</li>
<li hidden>Menu 2</li>
<li hidden>Menu 3</li>
</ul>
<select onchange="selectTab(this.value)">
<option value="1">Menu 1</option>
<option value="2">Menu 2</option>
<option value="3">Menu 3</option>
</select>
And example JavaScript:
function selectTab(e){
switch(e){
case 1:
$('#a1').click();
break;
case 2:
$('#a2').click();
break;
case 3:
$('#a3').click();
break;
default:
}
}
here's the jsfiddle
I have some html
<select id="dropd" class="search-type" data-toggle="dropdown">
<option value="">All</option>
<option value="standards-and-publications">Standards</option>
<option value="sedl-digital-library">Library</option>
</select>
and this small js function which I am using to attempt to select this drop down menu and apply a key listener to. However I am having trouble getting this code below
$('.search-type').on('show.bs.dropdown', function () {
alert("I FINALLY FOUND YOU");
});
to run when the drop down is shown (clicked in this case). Do I need to wrap in this in an event listener listening for clicks? I have actually already tried this method but still could not get it to display this message or react in any way when the user clicked on the drop down. Based on what I have seen when I ran through this in the debugger, It never resolves the class selector, but this is just a guess. Is there something glaringly obvious I am missing or some weird bootstrap rule when using selectors?
Also I apologize if I am not giving enough info I am relatively new to this and am unsure of what is going on entirely.
See here for an answer: Process for using show.bs.dropdown in Bootstrap
Basically, the event is handled by the parent of the drop-down, not the drop-down itself. Also, BootStrap dropdowns are usually <ul>s. Here's an example of a standard drop-down with a handler:
HTML
<div class="btn-group" id="ddlWrap">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
JS
$('ddlWrap').on('show.bs.dropdown', function () {
alert('Found the dropdown wrapper!');
});
I think the events fire on the parent.So it should be the element above the .dropdown.So your code should be
<div class="btn-group" id="myDropdown">
<select id="dropd" class="search-type" data-toggle="dropdown">
<option value="">All</option>
<option value="standards-and-publications">Standards</option>
<option value="sedl-digital-library">Library</option>
</select>
</div>
I have a list (menu) with values when the user clicks to execute a function that changes the value of a select is hidden. This works fine, but does not display the information to be displayed by selecting the correct option from the select itself.
<ul>
<li class='active has-sub'><a href='#'><span>SELECCIONE</span></a>
<ul>
<li class='has-sub'><a id="S0001" href='#'><span>AUTO NUEVO</span></a>
</li>
<li class='has-sub'><a id="S0002" href='#'><span>Product 2</span></a>
</li>
</ul>
<script>
$("#S0001").click(function(){
$("#proyecto").val('S0001');
$("#proyecto").change.val();
});
</script>
This is the hidden select to have all the functionality
<div id="styledselect"><select name="proyecto" id="proyecto">
<option value='S0001'>AUTO NUEVO</option>
<option value='S0002'>CELEBRACIONES</option>
</select></div>
For this to work correctly, once I changed the value of the select should run the change event itself and charge the correct information.
You need to call the change event:
$("#proyecto").change()
Note: this will run the defined change handler, not the native functionality
I have two dropdowns:
First Dropdown:
First Dropdown Code:
<select name="idx" id="masthead_search">
<option value="">Library catalog</option>
<option value="ti">Title</option>
<option value="au">Author</option>
<option value="su">Subject</option>
<option value="nb">ISBN</option>
<option value="se">Series</option>
<option value="callnum">Call number</option>
</select>
Second Dropdown:
Second Dropdown Code:
<select name="branch_group_limit" id="select_library">
<option value="">All libraries</option>
<option value="branch:01">Main Library</option>
</select>
In order to change the highlight background of the option tag when hovered, I converted select and option tag to ul li tag using this jquery code.
/** Convert a select-option tag to ul-li tag to change its dropdown highlight color from blue to green **/
$(document).ready(function(){
/**masthead_search **/
$('#masthead_search').parent().prepend('<div class="btn-group btn-input clearfix"> <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">Library catalog</span> <span class="caret"></span></button><ul id="newmasthead_search" name="masthead_search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">');
$('#masthead_search option').each(function(){
$('#newmasthead_search').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
$('#newmasthead_search').append('</ul></div>');
$('#masthead_search').remove();
$('#newmasthead_search').attr('id', 'masthead_search');
/**select_library **/
$('#select_library').parent().prepend('<div class="btn-group btn-input clearfix"><button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">All libraries</span> <span class="caret"></span></button><ul id="newselect_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">');
$('#select_library option').each(function(){
$('#newselect_library').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
$('#newselect_library').append('</ul></div>');
$('#select_library').remove();
$('#newselect_library').attr('id','select_library');
});
$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
var $target = $( event.currentTarget );
$target.closest( '.btn-group' )
.find( '[data-bind="label"]' ).text( $target.text() )
.end()
.children( '.dropdown-toggle' ).dropdown( 'toggle' );
return false;
});
After executing the code the dropdowns looks like this:
First Dropdown:
First Dropdown Code:
<div class="btn-group btn-input clearfix">
<button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
<span data-bind="label">Library catalog</span>
<span class="caret"></span>
</button>
<ul id="masthead_search" name="masthead_search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li value="" role="presentation"><a tabindex="-1" role="menuitem">Library catalog</a></li>
<li value="ti" role="presentation"><a tabindex="-1" role="menuitem">Title</a></li>
<li value="au" role="presentation"><a tabindex="-1" role="menuitem">Author</a></li>
<li value="su" role="presentation"><a tabindex="-1" role="menuitem">Subject</a></li>
<li value="nb" role="presentation"><a tabindex="-1" role="menuitem">ISBN</a></li>
<li value="se" role="presentation"><a tabindex="-1" role="menuitem">Series</a></li>
<li value="callnum" role="presentation"><a tabindex="-1" role="menuitem">Call number</a></li>
</ul>
</div>
Second Dropdown:
Second Dropdown Code:
<div class="btn-group btn-input clearfix open">
<button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
<span data-bind="label">All libraries</span>
<span class="caret"></span>
</button>
<ul id="select_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li value="" role="presentation"><a tabindex="-1" role="menuitem">All libraries</a></li>
<li value="branch:01" role="presentation"><a tabindex="-1" role="menuitem">Main Library</a></li>
</ul>
</div>
But When I resize my Browser Window and click the first button, my first dropdown doesnt show. And when I click my Second Drop-down the dropdown that is shown is the dropdown which is supposedly in my First Dropdown.
First Dropdown:
Second Dropdown:
Where did I go wrong? please help me.
Ok, so this is not really an answer to your question, but I can't fit it into a comment and I think it needs to be said.
You really need to think carefully as to whether for the sake of changing the colour of drop down items you want to do all this. This is a pretty hefty abuse of HTML and looks like it already has (and will continue to) lead you down a rabbit hole of awkwardness and problems. What you are doing here is throwing away a <select> element and replacing it with a <ul>. You might think 'so what', it looks and works fine, and gives you a greater amount of control over styling, let me try and convince you the why you should just stick with a <select>.
You're going to have a lot of fun posting that data
It looks like you are putting these drop downs in as part of a search form. This means it will be within a <form> element with an action to something like http://myawesomewebsite.com/search, and your search button is a submit button. When you hit submit the page will collect up all the form fields in your form and POST them to the search page. How are you planning on making the page POST your selected option? From the looks of one of the comments, it's possible you have some sort of JavaScript somewhere that is updating a hidden <select>? This will work, but isn't super pretty.
Mobiles/Touchscreens play nicely with selects
You're obviously developing with mobiles/touch screen devices in mind. Great! Too many people still don't bother. Native Select elements will (depending on the specific device/browser) render a nice, scrollable list when you click on it, which is much easier for a user on a small screen to tap than a drop down list that could potentially extend beyond the bottom of the users small screen. People browsing on mobiles will expect to see their devices native list picker when they click a drop down list, don't break peoples expectations without good reason.
Styling/positioning issues
Just like the one you are getting now. A native select list will position itself perfectly well. No hacks or even JavaScript required.
Other things
Remember I mentioned 'abuse of HTML' earlier, if you are expecting the user to select from a list, the element that should be rendered is a <select>, that's how the HTML standard was defined. This also helps accessibility devices understand what your element is and what it should do with it. A drop down list rendered as a <ul> doesn't really make sense to a screen reader, but a <select> with <option> tags make perfect sense. I think Bootstrap does quite a good job of helping screen readers understand elements like it's specialist dropdowns, but I'm no expert on accessibility, so I'm not sure.
I don't know about you, but whenever I use a select box, I click it, hit a key on my keyboard that corresponds to the first letter of what I am after and hit enter. You can't do that with a Bootstrap dropdown (although they are keyboard accessible, so that's good). In your case this perhaps doesn't matter too much, as your options are limited, but with more options this becomes a real time saver for the power users among your user base.
Have you also noticed the fact that in the Bootstrap docs they don't even show you an example of how to use a drop down in this way? The only example they provide are based on menus with links, not replacement selects. There is probably a good reason for that.
So, in conclusion
I'm well aware that there will always be reasons to customize things beyond their original spec, but if you can help it always try to use the elements for what they were designed for. There are plenty more pitfalls than I have mentioned here, and any future developers who take over this code will much prefer a simple select box than a convoluted, jQuery dependent solution. I'll admit that styling of select boxes has always been an issue, but from what I have seen of this particular case, I would recommend just sticking with selects.
However, if you still want to go with this solution then can I recommend you create a Bootply of your problem, with all relevant HTML and JavaScript, so we can have a better crack at replicating your issue.
I hope this has not come off as condescending, and I am by no means saying what you are doing is wrong, as I know nothing of your exact situation, I just felt an explanation as to the potential benefits of keeping it simple might help you or future visitors to this question.
How do you prevent the dropdown menu class in Bootstrap from closing whenever a link inside is clicked?
I want users to select one of the class "type-of-visitors" and also be able to select one of the options in the select field without closing the dropdown menu.
& the "Go" button will be the one closing the menu.
<ul class="dropdown-menu">
<li>Total visitors</li>
<li>Paid visitors</li>
<li>Social media</li>
<li>Compare data
<select>
<option>Last month</option>
<option>Last week</option>
<option>Last 3 months</option>
</select>
</li>
<li>
Go
</li>
</ul>
Here's the jsfiddle to it: http://jsfiddle.net/stan255/cU6Y5/
There was a similiar question posted about this and the answer should suffice
"The issue is that the boostrap dropdown jQuery plugin closes the dropped-menu when you click anywhere else. You can disable that behavior by capturing the click events on your dropdown-menu element and keeping it from reaching the click event listeners on the body element."
Just add
$('.dropdown-menu').click(function(event){
event.stopPropagation();
});