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
Related
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);
I want to trigger an on click event for my <i> tag. I added an ID to it but if i try use:
$("#delete-playlist-song").on("click", function() {
console.log("in"); //doesnt trigger
});
It won't trigger so I want to try a different approach? Something like:
$("master-playlist-entries").find("i.pl-action").on("click", function() {
console.log("in"); //Won't work
});
My HTML code:
<ul id="master-playlist-entries" class="database">
<li id="db-" track-name="James Darren - Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active">
<i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i>
<i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i>
<i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span></li>
</ul>
What I did try was an onclick event to call a function which worked but you see, I want to grab the data-path information and pass it to that function so I can use: $(this).attr("data-path") which will return a different link each time for different li.
Any help will be appreciated!
Your original code works in a one item snippet, https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/ so I have to guess as your example is incomplete:
It is not shown, but I would guess you have multiple <i> elements with the same id (e.g. id="delete-playlist-song). If that is the case it simply will not find any except the first one as browsers use a fast-lookup cache which can only have one element stored against each ID value. IDs must be unique on a HTML page to work property.
Switch to using classes instead and use a delegated event handler.
https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/1/
e.g.
$(document).on('click', '.delete-playlist-song', function() {
$(this).closest('li').slideUp();
});
Notes:
You should connect delegated event handlers to a non-changing ancestor element, but document is the best default if nothing else is close. Do not use body as it has a bug to do with styling that can cause mouse events to not fire. Use document as your friendly backup as it also exists before DOM ready.
I guess your html is added dynamically - so register the click listener dynamically using this:
$("body").on("click", "#delete-playlist-song", function() {
And for getting the attribute data-path you can use $(this).closest('li').attr("data-path") inside the listener.
See a demo below:
$("body").on("click", "#delete-playlist-song", function() {
console.log($(this).closest('li').attr("data-path"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<ul id="master-playlist-entries" class="database">
<li id="db-" track-name="James Darren - Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active">
<i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i>
<i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i>
<i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span>
</li>
</ul>
I have this html code below with the caret class fa fa-caret-down. Now I want that if the user clicks on the caret, the caret-down class shall gets removed and get replaced with the fa fa-caret-up class. And the same again, if he klicks on the caret-up class, it shall get back to the caret-down class.
( any other way is also okay ). I've tried this:
$(document).ready(function() {
$('.fa-caret-down').on('click', function () {
$(this).removeClass('fa-caret-down').addClass('fa-caret-up');
});
$(this).removeClass('fa-caret-up').addClass('fa-caret-down');
});
[ This toogle also runs very bad with this code ]
But this only works for the first part. If I'm trying to get back to the caret-down, nothing happens.
Thats my HTML:
<div id="acc-construct" class="hidden">
<div class="acc-group">
<div class="acc-head">
<a class="acc-toggle collapsed acc-default" data-toggle="collapse"
data-parent="#acc" href="#collapse-divsInContainer">
<i data-arrow="" class="pull-right fa fa-caret-down"></i>
</a>
</div>
<div id="collapse-divInContainer" class="acc-body collapse">
<div class="acc-inner">
<dl class="dl-horizontal"></dl>
<div class="separator"></div>
</div>
</div>
</div>
</div>
I'm still new in jquery/Js and sorry for my bad english.
Thanks for any help !
Set another class (caret-icon) on the caret element and attach click event to that class:
<i class="caret-icon fa fa-caret-down"></i>
And use toggleClass() method:
$(document).on('click', '.caret-icon', function() {
$(this).toggleClass('fa-caret-up fa-caret-down');
})
Use 'if - else' condition with 'hasClass' method.
Here is the Jquery
$(document).ready(function () {
$('.fa-caret-down').on('click', function () {
if ($(this).hasClass('fa-caret-down')) {
$(this).removeClass('fa-caret-down').addClass('fa-caret-up');
}else{
$(this).removeClass('fa-caret-up').addClass('fa-caret-down');
}
});
});
$('.fa-caret-down') finds the DOM - elements that have the class fa-caret-down when the code is executed, in your case after initialization. These elements get a click handler that removes fa-caret-down and adds fa-caret-up. The elements that have this handler don't change later. So, a second click on one of the elements also removes fa-caret-down and adds fa-caret-up.
You have to check in the handler if the element currently has class fa-caret-down or fa-caret-up. If it has class fa-caret-down you have to remove fa-caret-down and add fa-caret-up. If it has class fa-caret-up you have to remove fa-caret-up and add fa-caret-down.
Your current code $(this).removeClass('fa-caret-up').addClass('fa-caret-down'); does not help because it is executed only one time after initialization.
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 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.