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();
});
Related
I have a RouterLink used inside a li tag and which basically makes a simple dropdown menu, When options are present on the dropdown menu I can click on the text to go to the next page but not click anywhere else inside the box, instead I want to be able to click on the whole "bar" which is the li tag to be able to go to the page
<ul>
<li v-for="product in products">
<RouterLink :to="/product"> {{product}} </RouterLink>
</li>
</ul>
this creates a dropdown like this:
|product name |
|product 2 name |
Now clicking on only text works but I want to be able to click inside the box as well. How do you solve that.
Another question is how do I close the dropdown when it is clicked anywhere else.
The intuitive solution is to add click event handler to the li tag and use $router.push('/product') :
<ul>
<li v-for="product in products" #click="$router.push('/product')">
{{product}}
</li>
</ul>
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);
});
I'm using the following GetUIKit: https://getuikit.com/
I want to use the UIKit and JS to do the following:
When a button named "Next" is pressed, the active item on an unordered list is changed to the subsequent item and that content appears. I would also like for a second button to appear, "Previous", if the active item is anything other than the first item in the UL.
Here is what I have so far:
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
<li>Welcome</li>
<li>Get Involved</li>
<li>Sign-Up</li>
</ul>
<ul class="uk-switcher uk-margin">
<li>Welcome!</li>
<li>Here is how you can get involved!</li>
<li>Fill out the following form to be added to our contact list!</li>
</ul>
<button class="uk-button uk-button-default">Previous</button>
<button class="uk-button uk-button-default">Next</button>
UIKit provides navigation from the subnavs. In other words, I can click on those and it will pull up the corresponding item from the subsequent UL.
My issue is how I do this using a Next and Previous button. Are buttons the best choice? If so, using JS, what is the best way to go about manipulating the HTML/CSS to change what appears based on user's selection of "Next" or "Previous"?
I suggest you to use "Tab" in Uikit, Just use that tabbing name as Next/Prev
<ul uk-tab>
<li class="uk-active"></li>
<li></li>
<li class="uk-disabled"><a></a></li>
</ul>
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>
Right now I have a anchor link which upon clicking opens a modal window. Inside modal window I have Two tabs.
When the link is clicked the modal opens and tabs are shown.
Here is the code:
<a href="#" data-reveal-id="myModal" data-animation="fade" >Weekly Schedule</a>
And here is the modal window with tabs:
<div id="myModal" class="reveal-modal">
<a class="close-reveal-modal">×</a>
<div id="tabs">
<ul>
<li>Schedule 1</li>
<li>Schedule 2</li>
</ul>
<div id="tabs-1">
Schedule 1 content
</div>
<div id="tabs-2">
Schedule 1 content
</div>
</div>
</div>
Here is the JSFiddle :
http://jsfiddle.net/3npaykxd/7/
It is working fine. But now I want to change the anchor link to select drop down. So that whenever user changes the option. Modal window opens with the selected option tab open as default.
Like this :
<select name="schedule">
<option value="">Please Select schedule </option>
<option value="0">Schedule 1 </option>
<option value="1">Schedule 2</option>
</select>
So choosing option 1 will open modal window with tab 1 open as default inside it. And similarly choosing tab 2 will open modal with tab 2 open as default inside it.
How do I achieve this?
Ahmar
Thank to this: How do I open a tab from with jQuery UI Tabs from an link outside of the div?
When select box change, tabs also change. Here is jsFiddle: http://jsfiddle.net/3npaykxd/8/
$('#schedule').on('change',function(e){
console.log($(this).val());
$( "#tabs" ).tabs("select",$(this).val());
})
I think you can handle fadeIn/fadeOut yourself