I have a dynamically created set of bootstrap-select widgets I'm making with a dropdown. My issue is that to have the select not close the dropdown I have to put a 'event.stopPropagation()' on the dropdown itself.
When I do this the bootstrap select doesn't open when clicked, but a normal select will work. Is there a way to get the bootstrap select to work within a bootstrap dropdown where stopPropagation() is called on the dropdown click event?
Edit:
Example JsFiddle Test App
https://jsfiddle.net/ChaseRLewisAlamode/r4k5cy9s/1/
HTML
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Manage Statuses <span class="caret"></span>
</button>
<ul class="status-dropdown dropdown-menu" role='menu'>
<li role='presentation'>
<div class='status-item'>
<div class='status-text'>My Status</div>
<select class='selectpicker'>
<option value='active' selected>Active</option>
<option value='pending'>Pending</option>
<option value='sold'>Sold</option>
<option value='inactive'>Inactive</option>
</select>
</div>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Always Visible <span class="caret"></span>
</button>
<ul class="visible-dropdown dropdown-menu" role='menu' style="display: block;">
<li role='presentation'>
<div class='status-item'>
<div class='status-text'>My Status</div>
<select class='selectpicker'>
<option value='active' selected>Active</option>
<option value='pending'>Pending</option>
<option value='sold'>Sold</option>
<option value='inactive'>Inactive</option>
</select>
</div>
</li>
</ul>
</div>
javascript
$(".status-dropdown").on('click',function(e){
e.stopPropagation();
});
I'd recommend reading this question that is very similar.
Angular js stop propagation from Bootstrap "dropdown-toggle" event
Since you didn't post any code, I'm assuming that your problem is fairly similar. If my answer is way off base, you could help me refine it by posting in-code examples of the phenomenon you're curious about.
For your benefit, I'll try paraphrasing it here:
When you click select, I predict that two things happen.
First is that it opens Bootstrap dropdown menu. Second, the event propagates to the parent element and also triggers something like 'showDetails = !showDetails'.
The obvious solution is to try to stop event propagation with $event.stopPropagation() on the td level, so that event doesn't bubble up the DOM tree and never triggers parent ngClick. Unfortunately, it will not work because Bootstrap sets up click event listener on the document element to benefit from bubbling, so you can't stop propagation.
Assuming that's what's happening, I'd recommend that you check this example out:
Javascript:
$("#orgchart").jOrgChart({ chartElement: '#chart' });
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
e.stopPropagation();
$(.'dropdown-menu').toggle();
});
HTML:
<div id="chart">
</div>
<ul id="orgchart" style="display:none;">
<li>Test
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu" style="text-align:left;">
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<ul>
<li>Test1.1</li>
<li>Test1.2</li>
</ul>
</li>
</ul>
Related
In my blazor server side application I have cards representing datasets, which the user can manage.
They look like this:
The relevant code looks like this:
<div class="card h-100 text-dark" #onclick="() => OnDatasetSelected(dataset)">
<!-- header image -->
<div class="card-body position-relative">
<div class="dropdown dropstart">
<button type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<!-- menu content -->
</div>
<!-- card content -->
</div>
As one can see from the code, I'm currently adding the context menu (three vertical dots) using the template code from bootstraps dropdown (dropleft in my case) component.
This works fine - or rather it would if it weren't for the #onclick event on the card, which calls the code to select the dataset and navigate to another page.
Question basically is: How can I prevent the OnClick event, if an element inside is being clicked on. I guess, what I'm asking is: How can I prevent event bubbling in HTML? Is it possible without adding code to the inner dropdown element (display of bootstrap-dropdowns is done with popper.js, which is external)
Lol, found the answer here 5 minutes after posting:
Simply use onclick="event.stopPropagation();" to prevent the event bubbling.
So in the end I just add this to the dropdown container:
<div class="dropdown dropstart position-absolute top-0 end-0 " onclick="event.stopPropagation();">
<button type="button" class=" btn btn-outline-secondary fs-5 p-0 m-2 border-0"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
And now I can click my menu button:
Important Edit:
In case you have issues with onclick="event.stopPropagation();" preventing the #onclick event of the inner button to be fired, one can use the following directly at the inner button:
<button type="button" #onclick="MyFunction"
#onclick:stopPropagation="true">
Button Text
</button>
This will call MyFunction when clicking the button, but prevents the event to be propagated to the parent elements.
Hi I am using thirdparty js bootstrap-select to show custom select dropdown. To hide livesearch input for options below 5 I set liveSearch false in bootstrap-select. When livesearch is false when i trie to scroll down the options by pressing downkey in keyboard it shows error in the below line.
if (that.options.liveSearch) $parent = $this.parent().parent();
console error
are you talking about bootstarp dropdown this code may help you:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Material Type
</a>
<div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
<a class="dropdown-item">Mud</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cloth</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Thread</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Jute</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cotton</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cane</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Bamboo</a>
</div>
</li>
Can I get the value from the menu after selecting like following?
var email=document.getElementById('signUpEmail').value;
So that I can use this variable in ajax.
Edit
As #Timir suggest to use select then the menu is look like
<li class="nav-item">
<select class="custom-select custom-select-lg mb-3" id="mydropdown">
<option selected>Material Type</option>
<option value="Mud">Mud</option>
<option value="Cloth">Cloth</option>
<option value="Thread">Thread</option>
<option value="Jute">Jute</option>
<option value="Cotton">Cotton</option>
<option value="Can">Can</option>
<option value="Bamboo">Bamboo</option>
</select>
</li>
Can I get the value from the menu after selecting like following?
No, there are no input to retrieve their value.
but you can get the text inside the link like
$('.menu2 a.dropdown-item').on('click', function(){
$(this).text()
});
Turn it into a select, give it an id, then say:
$(“#mydropdown option:selected”).val();
There are workarounds for basically everything in JavaScript. Including this. Without using JQuery, you could add an event listener, or you could make an onlick within each option or anchor tag.
When you click on the drop down and set the option, it calls the function which sets the variable. So even though there is no input box... you are just setting a global variable. And then you utilize that variable as a part of a form or however you plan on using it.
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'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