I have a toggle buttons:
<div class="btn-group btn-group-vertical btn-block no-padding" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-block full-width">button1</button>
<button type="button" onclick="admLayer();" class="btn btn-block full-width">button2</button>
</div>
When i press button2 i call admLayer() function. All works fine but like simple button. How to send to function when button pressed or unpressed?
UPDATE
I try use http://www.larentis.eu/bootstrap_toggle_buttons/ :
<script>
$('#btn-group btn-group-vertical btn-block no-padding').toggleButtons({
onChange: function ($el, status, e) {
console.log($el, status, e);
}
});
</script>
But its not work.
Whats can be wrong?
You are mistakenly selecting the div on the basis of Id, If you want to select the div, you should do something like this :-
<script>
$(".btn-group").toggleButtons({
onChange: function ($el, status, e) {
console.log($el, status, e);
}
});
</script>
Classes are selected with Dot('.') and ids are selected with Hash('#').
Thanks
Related
I am making a Simon game, but I need to get the "id" (attribute) value. but whenever I click on the different color it still gives me the first attr value which is in this case is green. how many times do I click on the red, blue, or yellow button but it still gives me a green value (the first one). help, please!
//Below code HTML
<div class="container">
<button class="btn green" id="green"></button>
<button class="btn red" id="red"></button><br />
<button class="btn yellow" id="yellow"></button>
<button class="btn blue" id="blue"></button>
</div>
//Below code Jquery
$(".btn").click(function () {
var userChosenColor =$(".btn").attr("id");
console.log(userChosenColor);
});
Reference to the button clicked.
You do not necessarily need jQuery for this.
$(".btn").click(function () {
var userChosenColor = $(this).attr("id");
console.log('jQuery: '+ userChosenColor);
});
/* non jQuery */
const btns = document.querySelectorAll('.btn');
btns.forEach(btn=> {
btn.addEventListener('click', () => {
console.log('JS only: '+btn.id)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<button class="btn green" id="green">1</button>
<button class="btn red" id="red">2</button><br />
<button class="btn yellow" id="yellow">3</button>
<button class="btn blue" id="blue">4</button>
</div>
<div id="success">
<button class="btn btn-primary btn-xl" type="submit" id="btnShow">Send</button>
</div>
I am not able to write javascript(facing errors, as i am new to javascript) to display success alert on click event.
the script i wrote is :
$("#btnShow").click(function(){
$(".alert").show();
});
As easy as this:
<script>
function success() {
alert("success!");
}
</script>
<div id="success">
<button onclick=success() class="btn btn-primary btn-xl" type="submit" id="btnShow">Send</button>
</div>
Elements can have an onclick property, with a function's name.
what you need is a simple built-in java script function
<script type="text/javascript">
$(document).ready(function() {
$('button#btnShow').click(function(){
alert("Success");
});
});
</script>
I have a page with many articles. Each article has a delete button. How can I identify the button clicked for the article?
Currently I have this:
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
$('#delete-article').on('click', function(e) {
console.log('Test delete article');
});
This logs 'Test delete article' according to the number of articles on the page.
You can attach the event on button and use this object to refer the currently clicked button:
$('button').on('click', function(e) {
console.log(this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
<button type="button" id="delete-article-2" class="btn btn-small btn-danger">Delete</button>
You can use your event variable to get the target of the event (that is, the element responsible) and from there get its id, like this:
let btnId = event.target.id;
However, for that to work properly you should assign unique ids to your buttons. If you want to provide other data (or you don't want to use id) you can append custom attributes, like data-value or similar, and use it like this:
let myValue = event.target.getAttribute('data-value');
You need to establish relation between article and corresponding button, one way to implement is by using HTML5 data attribute.
assign data-articleId to article id in button element and when you click the button you can access which button was clicked by using Jquery .data() function.
<button type="button" data-articleId='123' class="btn btn-small btn-danger delete-article">Delete</button>
$('.delete-article').on('click', function(e) {
$(this).data('articleId'); //will return 123;
console.log('Test delete article');
});
If all the buttons have this markup
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
Then the DOM sees them as just one button, you should find a way to attach unique ids to your buttons
You can get an object of clicked button then you can get any details from that object like an index or whatever you want.
$('#delete-article').click(function(){
console.log($(this));
console.log($(this).index());
});
You can directly achieve it by using the JavaScript.
document.addEventListener('click',(e)=>{
console.log(e.target.id)
})
<button type="button" id="delete-article1" class="btn btn-small btn-danger">Delete1</button>
<button type="button" id="delete-article2" class="btn btn-small btn-danger">Delete2</button>
<button type="button" id="delete-article3" class="btn btn-small btn-danger">Delete3</button>
<button type="button" id="delete-article4" class="btn btn-small btn-danger">Delete4</button>
<button type="button" id="delete-article5" class="btn btn-small btn-danger">Delete5</button>
<button type="button" id="delete-article6" class="btn btn-small btn-danger">Delete6</button>
<button type="button" id="delete-article7" class="btn btn-small btn-danger">Delete7</button>
I am using bootstrap version so I have created a slide down menu same like below example.
button not working second time
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
The problem is that when I click on close button in slide down the bar is closing up.
But when I again click on add wish list the slide down is not appearing again.
My problem is not only closing. It should close when i click on 'x' button if not it should close automatically after specific time.
Thanks.
Remove this from your close button 'data-dismiss="alert"' and add one more click function like below:
$(document).ready (function(){
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").slideUp(500);
});
});
$('#success-alert .close').click(function(){
$(this).parent().hide();
});
});
HTML will like:
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini" >Add to Wishlist </a>
Purchase
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
</div>
This simple trick worked for me. Use this close.bs.alert bootsrap's event type to hide the element instead of removing it.
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).addClass('hidden');
});
or
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).hide();
});
Instead of writing whole code .I used slideUp() dealy() and slideDown() methods of Jquery.
$(document).ready(function() {
$("#success-alert").hide();
$("#btn2").click(function showAlert() {
$("#success-alert").slideDown(300).delay(2000).slideUp(400);
});
});
$('#success-alert .close').click(function() {
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-options">
<input type="button" id="btn2" value="Add to wish list" />
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
I have a javascript knockout button that i would like to disable for 3 second after the first click.
<button type="button" class="btn btn-default btn-xs" data-bind="click: editFile">
Edit
</button>
I have tried
<button type="button" class="btn btn-default btn-xs" data-bind="click: editFile, disable:disableButton">
Edit
</button>
Then on JavaScript I did this. That disables the button completely.
disableButton = ko.observable("true");
I also tried pure JavaScript but that didn't work at all:
$(function() {
$(".btn-default").click(function() {
$(".btn-default").attr("disabled", "disabled");
setTimeout(function() {
$(".btn-default").removeAttr("disabled");
}, 3000);
});
});
I tried following the example that was given by knockout but I don't think I'm doing it properly:
Knockout example
Can someone please help I'm new to knockout and JavaScript?
Refer below code snippet -
function AppViewModel() {
var _self = this;
_self.disableButton = ko.observable(false);
_self.editFile = function(){
_self.disableButton(true);
setTimeout(function() {
_self.disableButton(false);
}, 3000);
};
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<button type="button" class="btn btn-default btn-xs" data-bind="click: editFile, disable:disableButton">
Edit
</button>
You just need to update the observable true or false to enable/disable the Edit button.
Hope this helps!