I am trying to trigger a manual dropdown event in javascript. below is the function where I am working. I am stopping the first event that takes place and now i want to trigger a drop down event.
stopNavigationTriggerDropDown(event: any){
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
//code that triggers manual dropdown event
}
now this is the html code:
<tr (click)="goToPlan(plan)">
<td>....</td>...
<td>
<div class="input-group">
<button (click)="stopNavigationTriggerDropDown($event)" type="button" class="btnTransparent" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h"></i>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" (click)="action(apl)">Go</a>
</div>
</div>
</td>
</tr>
I can not use jQuery just pure JavaScript. I have searched online but many examples show jQuery, but I need it to be just pure JS. I thank you guys in advance!
There are two main ways you can accomplish this.
1: Fire button's click event:
var button = document.getElementsByClassName("example");
button.click()
2: Create and dispatch an event on the page (see: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)
var button = document.getElementsByClassName("example");
var btnEvent = new Event('click');
button.dispatchEvent(btnEvent);
Related
bit of a variation on a question I've asked before but the issue is this. We want to show a cart dropdown on the click of an 'add to cart' button. The issue is that knockout and jquery don't seem to be playing nice together with the click dispatch because when you click the button, something seems to prevent the drop down from showing. I am sure I am doing something wrong. Here's the code. I've spent way too much time on this and about to throw my computer :). It works if you just do the event on the console (of course).
HTML for the button and cart that needs to be shown
Add to Cart
More Info
<li id="cart-nav" class="nav-menu cart">
<a class="first" href="#">
Cart (<span data-bind="text:cartTotalItems">19</span>)
<div class="caret">
<i class="fa fa-caret-right"></i>
<i class="fa fa-caret-down"></i>
</a>
</li>
JS
self.addProductToCart = function(data, event) {
var $productNotification = $(event.target).prev().children('.product-notification');
ax.Cart.addCartItem({product_id:data.id, name:data.name, description:data.description});
self.openCartMenu();
$productNotification.addClass('rise');
$productNotification.on('animationend',function() {
$(this).removeClass('rise');
});};
self.openCartMenu = function () {
$('#cart-nav').find('a.first').click();};
I have this dropdown-toggle and I want to call the function read(); every time it is clicked or toggled. There is something wrong with the onclick command wherein it is always calling the function read(); even though the toggle is not clicked. I have also tried other commands such as ondrop
Html:
<a data-toggle="dropdown" class="dropdown-toggle" onclick="read();">
<i class="fa fa-globe"></i>
<span class="badge">
<%=unread%>
</span>
</a>
Javascript:
function read() {
<%
notificationDAO.read(((User)session.getAttribute("user")).getEmployeeID());
%>
}
Guessing that you are using bootstrap the data-toggle has its own events
$('#myDropdown').on('show.bs.dropdown', function () {
call you read method here..
})
Hope this helps.
https://jsbin.com/fayoda/edit?html,js,console,output
I have an Angular JS 1.3 app.
In it I have a table row repeater with an ng-click:
<tr ng-repeat-start="user in users.users" ng-click="showDetails = !showDetails">
<!-- main row, with the menu td shown below -->
<tr class="row-details" ng-show="showDetails" ng-class="{ 'active': showDetails }">
<td>this is the row that hows details</td>
</tr>
<tr ng-repeat-end></tr>
Which toggles opening a detail view. Works fine. But now I need to add another item in each of the tds, a Bootstrap button menu:
<td>
<div class="btn-group">
<div ng-switch on="user.status">
<button class="btn btn-link btn-gear dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog"></i></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Inactive">
<li>Delete</li>
</ul>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Invited">
<li>Resend invitation</li>
<li>Delete</li>
</ul>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-default>
<li>Reset password</li>
<li>Delete</li>
</ul>
</div>
</div>
</td>
Problem is, trying to click on this menu button instead triggers the ng-click on the row, toggling the row state but never opening my menu. How can I prevent this?
This is pretty tricky problem. The thing is that when you click menu button two things happens: the first is that it opens Bootstrap dropdown menu, and the second is that event propagates to the parent element and also triggers 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.
The simplest solution I came up with in such cases is to set a flag on the original event object whether event occurred on the menu button. If this is the case ngClick on the tr won't do anything.
It will look like this for tr:
<tr ng-repeat-start="user in users.users" ng-click="$event.originalEvent.dropdown || (showDetails = !showDetails)">
ans for button:
<button ng-click="$event.originalEvent.dropdown = true" class="btn btn-link btn-gear dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</button>
Demo: http://plnkr.co/edit/eIn6VW3Y2jHn0MtJQVcU?p=preview
With help of dfsq's answer I managed solve same kind of problem in Angular 2. Here is my sample code.
<td class="tablerowdata" (click)="$event.dropdown || onSelect(track)" >
<button (click)="$event.dropdown = true" type="button" class="btn btn-default dropdown-toggle trackbuttons" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Using jsTree 3.0.8 I want to allow nodes to be dragged and dropped within the tree, but it should only allow that action if it was initiated by a drag on a specific button or "drag handle", instead of the default behavior of allowing dragging anywhere on the row.
I populate my tree via Html and for each node I draw out a toolbar as part of that row's Html content. I assign delegated jQuery click handlers to the toolbar items. One of the toolbar items needs to have a move icon and only allow that tree item to be moved by dragging on that toolbar button.
jQuery UI has a similar drag handle concept documented here:
https://jqueryui.com/draggable/#handle
Here is one node of my tree. The "Reorder" button is where I want the user to be able to drag the row, and nowhere else.
<li data-jstree="{ 'type': 'page' }">
<i class="jstree-icon jstree-ocl" role="presentation"></i>
<a class="jstree-anchor" href="#" tabindex="-1" id="109_anchor">
<i class="jstree-icon jstree-themeicon fa fa-2x fa-file font-grey-cascade jstree-themeicon-custom" role="presentation"></i>
<div class="pull-left">
<div class="friendly-name">test</div>
<small>/okay/its/a/test</small>
</div>
<span class="nodeToolbar">
<a title="Edit" class="passthrough btn grey-cascade btn-xs" href="/Pages/Edit/109"><i class="fa fa-pencil"></i> Edit</a>
<a title="Preview" class="preview btn grey-cascade btn-xs" target="_pagePreview" href="/Pages/Preview/109"><i class="fa fa-eye"></i> Preview</a>
<button title="Reorder" class="reorder btn grey-cascade btn-xs" href="#">
<i class="fa fa-arrows"></i> Reorder
</button>
</span>
</a>
</li>
I already took a look at some other solutions that involve check_callback but that seems to only prevent the move operation at the end (during the drop) rather than what I need, which is to filter the operation at the beginning (when the drag is initiated).
You will probably need to work with is_draggable:
http://www.jstree.com/api/#/?q=is_dragg&f=$.jstree.defaults.dnd.is_draggable
For a quick and dirty solution - listen for mousedown touchstart events on anchor nodes and set a variable which you can then later use in the is_draggable check:
var allow_drag = false;
$('#tree').on('mousedown touchstart', '.jstree-anchor', function (e) {
allow_drag = e.target.className.indexOf('reorder') !== -1;
});
$('#tree').jstree({
dnd : {
is_draggable : function () { return allow_drag; },
...
I have a twitter bootsrap dropdown ,
<button class="dropdown-toggle" data-toggle="dropdown" >
<span>Select</span>
<span class="pull-right" ng-click="showpopup();">Show popup</span>
</button>
<ul class="dropdown-menu">
...drop down.....
My issue is that clicking on showpopup function also dropdown will dsiplay .( i know it is because of part of drop down).I cannot move showpopup span outside of dropdown.
Clicking on showpopup function should not open drop-down.
Is there any way to achieve this .
Please suggest
You can try to stop propagation after your ng-click function being executed.
Like this:
<span class="pull-right" ng-click="showpopup(); $event.stopPropagation();">Show popup</span>
This prevents the event from being propagated to the outer DOM elements.