I have the following inline styles for a dropdown menu list. I do not know how to make it in to 'click' using jQuery.
<button class="btn btn-primary mw" data-toggle="dropdown"><span class="caret">Subject</span></button>
<div class="dropdown-menu">
<a class="dropdown-item Business" onclick="selectBusiness()"> Business</a>
<a class="dropdown-item ICT" onclick="selectICT()"> ICT</a>
<a class="dropdown-item Arts" onclick="selectArts()"> Arts</a>
</div>
More information:
I tried to do this following code for a button and it's working fine. But as I said I do not know how to make it work for a dropdown menu.
var btn = document.querySelector("button.selectAll");
btn.addEventListener("click", selectAll);
....
Your input would be greatly appreciated!
If you want to use jQuery, you can add listener to the classes of each <a> inside your dropdown.
$(".Business").on('click', function() {
//selectBusiness() or your code here
});
$(".Arts").on('click', function() {
//selectarts() or your code here
});
$(".ICT").on('click', function() {
//selectICT() or your code here
});
Another solution would be to add a single listener for all your dropdown-items and then checking the content of the selected one.
$(".dropdown-item").on('click', function() {
switch ($(this).text()) {
case "Business":
selectBusiness();
break;
}
});
Related
In my laravel application foreachloop rendring multiple button i want that disable or remove only that button which is clicked so i tired this piece of code
#foreach()
<a onclick="remvebtn()" class="btn">My Button</a>
#endforeach
javascript
function remvebtn(){
$(this).removeAttr("onclick");
}
but it is not helpful
Here is a very simple way of removing the onclick event from a button, once it is clicked:
function remvebtn(btn){
console.log(btn.textContent)
btn.onclick=null;
}
<a onclick="remvebtn(this)" class="btn">My Button1</a><br>
<a onclick="remvebtn(this)" class="btn">My Button2</a><br>
<a onclick="remvebtn(this)" class="btn">My Button3</a><br>
<a onclick="remvebtn(this)" class="btn">My Button4</a>
Or, you can also do it like this:
document.body.onclick=ev=>{
let btn=ev.target;
if (btn.classList.contains("btn")){
ev.preventDefault();
console.log(ev.target.href);
btn.classList.remove("btn");
btn.removeAttribute("href");
}
}
My Button1<br>
My Button2<br>
My Button3<br>
My Button4
<a aria-expanded="false" data-toggle="tab" href="#pictures">
<i class="pink ace-icon fa fa-gift bigger-120"></i>
Pictures
</a>
I want to wire on click #picture event to alert some message so I add
$(document.ready(function() {
$("#pictures").click(function(){
alert('clicked!');
});
})
but this doesnt work, I've got no error messages inside firebug console.
Jquery is loaded before correctly.
In your html there is no element with ID pictures, change it, like so
$("#pictures").click(function(){
alert('clicked!');
});
// or use selector like this, if you can't change html
$('a[href="#pictures"').click(function(){
alert('clicked!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a aria-expanded="false" data-toggle="tab" href="#pictures" id="pictures">
<i class="pink ace-icon fa fa-gift bigger-120"></i>
Pictures
</a>
Update:
Also you have error in this line
$(document.ready(function() {
change it
$(function() {
// put your code
});
Did You try tout set the click handler on document?
jQuery(document).on('click', '#pictures', function(e) {
alert('clicked');
});
You also have to add :
id="pictures"
In your . Or an y other selector.
If you want to still use the #picture in href check on bellow code
jQuery(document).ready(function($) {
$("a[href='#pictures']").click(function(){
alert('clicked!');
return false;
});
})
Try this Demo, even changed some markup for the same.
$(document).ready(function() {
$("#pictures").click(function(){
alert('clicked!');
});
})
When I click on the input my dropdownmenu is expanded, what I need is to expand it automatically Onkeyup event.
I'm trying the following but not working.
HTML
<div class="btn-group DropDownMenu">
<input id="input1" class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" type="text" onkeyup = "Filter()">
<ul class="dropdown-menu">
<li></li>
</ul>
</div>
JavaScript
function Filter() {
//some other code
$("#input1").click();
}
Any thoughts ? I'm using bootstrap btw
remove class="dropdown-toggle" and data-toogle="dropdown" from input and this to JS
$(".dropdown").keyup(function (event) {
//preventing default behaviour of bootstrap
event.stopPropagation();
$('.dropdown-menu').dropdown().toggle();
});
I don't know where have you written the javascript.
I have created a fiddle and changed the javascript a little:
window.Filter = function() {
$("#input1").click();
}
it is working in the fiddle. http://jsfiddle.net/dyo8fowt/
I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.
<div class="btn-group ewButtonGroup open">
<button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
<ul class="dropdown-menu ewMenu">
<li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&TeamID=1">View</a></li>
<li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
<li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
</li>
</ul>
</div>
I have tried the following code which deosnt work.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink ewView span').text();
if ( Week_Check > 10) {
$('.ewRowLink ewView').hide();
}
});
</script>
You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:
$('.ewRowLink.ewView').hide();
By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.
You can use .off() to unbind the event:
$('.ewEdit, .ewCopy').off('click');
or if you want to hide:
$('.ewEdit, .ewCopy').hide();
Yet you need to mention on what condition you want to do this.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink, #ewView').find('span').html();
if ( Week_Check > 10) {
$('.ewRowLink, .ewView').hide();
}
});
</script>
Hi I have a bootstrap dropdown menu that is auto filled from a database. I am trying to get an event to happen when I click on one of the items in the menu. I have tried
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
with ".ddBtnClick" being a class assigned to each of the items in the list. but nothing happened.
Here is the code to populate the list from a database.
$.getJSON("http://jeremiah.abrahamott.com/DadsCarsObjects.txt", function(data){
$.each(data.aaData, function(i, option){
$("#dropdownfill").append($('<li/>').append($('<a/>').attr("id", option.Year).attr("href", "#").attr("tabindex", "-1").addClass("ddBntClick").text(option.Make)))
});
});
Here is the html for the dropdown.
<div class="row" style="margin-left:50px;">
<div class="span3">
<div class="btn-group">
<a class="btn dropdown-toggle" data- toggle="dropdown" href="#">Make
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="dropdownfill">
</ul>
</div>
</div>
</div>
Issue is with your className. You are registering the delegated event handler for ddBtnClick but actual class name is ddBntClick.
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
and
.addClass("ddBntClick");
Change the class name during construction or change in your event delegation.
$(function()
{
$("body").on("click", ".ddBntClick", function(event) {
console.log("Is it working? Yes!!");
});
});
Have you tried wrapping your Javascript in the document.ready event?
$(function()
{
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
});
See the jQuery .ready() documentation for more information and examples.
Also, you should register the click event on the actual button and use .click() instead of .on():
$(function()
{
$(".ddBtnClick").click(function(event) {
console.log("Is it working? Yes!!");
});
});
Also, you have a typo:
.addClass("ddBntClick")
Should be:
.addClass("ddBtnClick")