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>
Related
I am trying to click on the button class "btn ActionBar__button", but there are 2 of them and it always clicks on the button that contains the title "Don't Click".
How can I click on the button with the same class, but has a different title?
I am trying to use this code:
var elems = document.getElementsByClassName('btn ActionBar__button'); elems[0].click();
Here is the HTML:
<div class="ActionBar">
<button class="btn ActionBar__button" type="button" title="Don't Click">Don't Click</button>
<button class="btn ActionBar__button" type="button" title="Click on this button">Click on this button</button></div>
You can use .querySelector
let elem = document.querySelector('[title="Click on this button"]');
console.log(elem)
elem.click();
<div class="ActionBar">
<button class="btn ActionBar__button" type="button" title="Don't Click">Don't Click</button>
<button class="btn ActionBar__button" type="button" title="Click on this button">Click on this button</button></div>
I have a button that leads to a modal view. I try to intercept the value with JS.
It works like this:
<button type="button" class="btn btn-outline-primary btn-sm"
data-toggle="modal" data-target="#myModal" data-person-id="something">
Edit
</button>
JaveScript:
var bookId = $(e.relatedTarget).data('person-id');
It doesn't work like this:
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#myModal" data-th-id="${person.getId()}">
Edit
</button>
JS:
var bookId = $(e.relatedTarget).data('id');
or
var bookId = $(e.relatedTarget).data('th-id');
var is undefined it says.
Since I use Thymeleaf I need to catch the value with data-th-id.
Any idea how to get the value
Complete JS
$('#myModal').on('shown.bs.modal', function (e) {
$('#myInput').focus();
var bookId = $(e.relatedTarget).data('id');
alert(e.relatedTarget.nodeName);
alert(bookId);
});
data-person-id="something" is a data attribute, and is accessed with $('...').data('person-id').
data-th-id="${person.getId()}" isn't a data attribute. It's just a different way of saying th:id, which outputs the id="..." attribute of a tag. You can't use jQuery's .data() method on non-data attributes, instead you use attr() -- $(e.relatedTarget).attr('id');
I am trying to create a button group of two (using bootstrap and angularjs) that, when clicking on them, each would redirect to a different URL. I currently have the following code (copied only the relevant pieces):
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>
However, this doesn't work, and I am not sure why. I might not be passing the arguments correctly, but I tried it even without passing the link itself and it still didn't work. Would appreciate any help!
Are you trying to pass the url ?,
if so, then i would be like this :
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(link){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>
Ok so after many many attempts, and with some inspiration from the answers above, I was able to solve it in the following way:
app.controller('LinkController',function($scope){
$scope.go = function(link){
window.location = link;
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button id = Image type="button" class="btn btn-primary"
data-ng-click = "go('Test1.html')">Click1</button>
<button id = Text type="button" class="btn btn-primary"
data-ng-click = "go('Test2.html')">Click2</button>
</div>
Thanks for your help guys.
I don't know much of Angular js, but there are other alternative ways to achieve the same purpose. This works with simple html
<div class="btn-group btn-group-lg">
<input type="button" class="btn btn-primary">Click1</input>
<input type="button" class="btn btn-primary">Click2</input>
</div>
Notice I changed the button element to input, this because a button element can not be placed inside an anchor tag <a>.
I hope this helps
I have two buttons. One where i clone a div (button-add) and one where I remove a div (button-remove).
I want to disable the remove-button when I only have one div.
So for multiple divs, it looks like this:
<button type="button" class="btn btn-default btn-lg button-add">+1</button>
<button type="button" class="btn btn-default btn-lg button-remove">-1</button>
<div class="copybox"></div>
<div class="copybox"></div>
<div class="copybox"></div>
...and when there's only one div, I want it to look like this:
<button type="button" class="btn btn-default btn-lg button-remove" disabled>-1</button>
<div class="copybox"></div>
I use jQuery 1.11.3
Here you go. Hope this is what you need.
$('.btn').on('click',function(){
if($(this).text()=="+1")
{
$('.button-remove').prop('disabled',false);
$('div.copybox:first').clone().appendTo('body');
}
else
{
$('div.copybox:last').remove();
}
$('div.copybox').length==1?$(this).prop('disabled',true):$(this).prop('disabled',false)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn-lg button-add">+1</button>
<button type="button" class="btn btn-default btn-lg button-remove">-1</button>
<div class="copybox">Copy</div>
<div class="copybox">Copy</div>
<div class="copybox">Copy</div>
Try using the $("div.copybox").length that DontVoteMeDown commented and then set an ID for the button remove. Once you do that, you can add a function to hide the button with this code.
document.getElementById(buttonID).style.display = 'none'
If later you decide to enable it again, then you can also add another if statement and then the code for that would be block instead of none
I have a toolbar with buttons. Only one button has the class 'btn-info' for instance to indicate it is currently selected.
But it may not be 'btn-info', it could be btn-anything.
If I click any of the buttons in the tool bar I want to know what the matching class is on which ever button is selected.
I have tried:
$('.btn-toggle-group .btn').click(function(){
var selectedClass = $(this).siblings('button[class^="btn-"]').prop('class')
$('.btn-toggle-group .btn').removeClass('btn-info btn-primary btn-danger btn-success btn-warning btn-default')
})
And...
$('.btn-toggle-group .btn').click(function(){
var selectedClass = $(this).parent().find('[class^="btn-"]').prop('class')
$('.btn-toggle-group .btn').removeClass('btn-info btn-primary btn-danger btn-success btn-warning btn-default')
})
But to no avail.
How can I achieve this? The solution in Jquery or pure Javascript is fine (Javascript is preferred as it is native and faster).
<div class="btn-group btn-toggle-group">
<button type="button" class="btn btn-info">Current</button>
<button type="button" class="btn">Deleted</button>
</div>
Try using * instead of ^
$(this).siblings('button[class*="btn-"]').prop('class');
I think you just need to switch to .attr('class') instead of .prop('class'). DOM elements have properties className and classList; you could also use those if preferred.