I have a table and buttons and all buttons are getting generated with a loop.
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>
I want to find which button I click and then change its class.
now in my jquery script
$( document ).on( 'click', '.remove-connetion', function (e) {
e.preventDefault();
$('td').find('.fa fa-trash').closest('button').removeClass('btn-danger');
$('td').find('.fa fa-trash').closest('button').addClass('btn-secondary');
});
it's not changing class.
Thanks for all help
Use this instead inside the callback to get the current clicked button:
$(document).on('click', '.remove-connetion', function(e) {
e.preventDefault();
var clicked = $(this);
setTimeout( function() {
clicked.removeClass('btn-danger');
clicked.addClass('btn-secondary');
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>
You can do it like this:
$( document ).on( 'click', '.remove-connetion', function (e) {
e.preventDefault();
e.target.classList.remove('btn-danger');
e.target.classList.add('btn-secondary');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>
Related
For a javascript project, I need to be able to interact with three bootstrap buttons.
The code for the buttons goes as follows:
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
I am not allowed to modify this line, so simply adding an id to the button is out of the question.
That being said, how can I add an click listener to these buttons and interact with them?
Thank you for your time.
You can use querySelector, see example below:
var button1 = document.querySelector('[data-id="0"]')
var button2 = document.querySelector('[data-id="1"]')
var button3 = document.querySelector('[data-id="2"]')
button1.addEventListener("click", () => {
console.log("button1");
});
button2.addEventListener("click", () => {
console.log("button2");
});
button3.addEventListener("click", () => {
console.log("button3");
});
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
They already seem to have ids that you can query for using querySelector along with attribute selectors.
document.querySelector("a[data-id='0']").addEventListener("click", () => {
console.log("You clicked data id 0");
});
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
Try to use the classname:
var elements = document.getElementsByClassName("btn");
var myFunction = function() {
console.log("Button with data-id", this.getAttribute("data-id"), "clicked");
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
Simply use data-id as selector.
see example
let elem = document.querySelector('[data-id="0"]');
console.log(elem)
elem.click();
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
I've been looking over JStree documents, but I can't seem to get these buttons to function permanently.
Please help, thank you.
JSP:
<div col-xs-12 id="button-row4">
<button class="btn btn-success btn-sm" id="delete_node" onclick="demo_create();">
<i class="glyphicon glyphicon-asterisk"></i>
Create
</button>
<button class="btn btn-warning btn-sm" onclick="demo_rename();">
<i class="glyphicon glyphicon-pencil"></i>
Rename
</button>
<button class="btn btn-danger btn-sm" onclick="demo_delete();">
<i class="glyphicon glyphicon-remove"></i>
Delete
</button>
</div>
<div id="jstree_demo_div"> *tree data list* </div>
Jquery:
$("#jstree_demo_div").jstree({
'core': {
'data': coredata
},
'search': {
"case_insensitive": true,
"show_only_matches" : true
},
'plugins': ["search"]
});
$('#jstree_demo_div').on("select_node.jstree",
function(evt, data){
console.log('id '+ JSON.stringify(data.node.id));
console.log('text '+ JSON.stringify(data.node.text));
console.log('li_attr '+ JSON.stringify(data.node.li_attr));
}
);
I want to call a JS function with an onClick attribute attached to a button within a Bootstrap popover like this :
$('[data-toggle="popover"]').popover({
trigger : 'click',
content : '<center><button onClick="quickDelete();return false;" name="dltBtn" class="btn btn-danger btn-xs btn-block"><i class="fa fa-trash"></i> Delete</button><button class="btn btn-warning btn-xs btn-block stsBtn"><i class="fa fa-edit"></i> Status</button></center>'
});
But when I click on the button :
ReferenceError: quickDelete is not defined
I also done that :
$('[data-toggle="popover"]').popover({
trigger : 'click',
content : '<center><button class="btn btn-danger btn-xs btn-block dltBtn"><i class="fa fa-trash"></i> Delete</button><button class="btn btn-warning btn-xs btn-block stsBtn"><i class="fa fa-edit"></i> Status</button></center>'
});
$('.dltBtn').click(function() {
alert('ok');
});
But nothing .. Can you help me maybe ?
Thank you so much !
I'm setting up a registration form and using JQuery to change a button type after pressing 'next'.
This currently works but I would like the button to revert in the case 'back' is pressed.
My code is below.
$(function () {
$('#next').on('click', function () {
$('.reg-page-1').animate({'left': '-105%'});
$('.reg-page-2').animate({'left': '0px'});
$('.btn-next-1').html('<button type="submit" class="btn btn-submit-1 btn-success btn-lg btn-block"><span class="glyphicon glyphicon-flash"></span> Submit!</button>');
});
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('btn-submit-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
});
And the block of HTML in question is below.
<div class="btn-toolbar" style="width:100%;">
<div class="btn-back-1" style="width:49%;float:left;">
<button id="back" type="button" class="btn btn-default btn-lg btn-block" aria-expanded="false">Back </button>
</div>
<div class="btn-next-1" style="width:49%;float:right;">
<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>
</div>
</div>
UPDATE
I've updated the JS to the below
$(function () {
$('#next').on('click', function () {
$('.reg-page-1').animate({'left': '-105%'});
$('.reg-page-2').animate({'left': '0px'});
$('.btn-next-1').html('<button type="submit" class="btn btn-submit-1 btn-success btn-lg btn-block"><span class="glyphicon glyphicon-flash"></span> Submit!</button>');
});
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
});
However, I am now finding myself in a strange issue.
The button indeed works, it changes the state of my application.
But once "back" is clicked and the button switches back to "next". the "next" button does not seem to function or switch again to a "submit" button.
In other words, it seems these functions are only capable of working once each.
Everything seems to be ok, but you dont have any selector with 'btn-submit-1', with the corrections your code for back button must be like this:
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
You should change the second selector to be the same as the first one.
Because with the .html() you are changing the content of the container div of the nex, but that div is still there.
If you use:
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
it will return to the original state.
<button id="KullaniciSec" type="button" runat="server" onserverclick="KullaniciSec_OnServerClick" onclick='<%# string.Format("return SecDegerler(\"{0}\");",Eval("id")) %>' class="btn btn-default btn-xs">
<i class="fa fa-folder-open-o fa-2x"></i>Seç </button>
I will call JavaScript code from this code but I have error message and i will open console
<button onclick="return SecDegerler("23"); __doPostBack('ctl00$ContentPlaceHolder1$griduser$cell0_9$TC$KullaniciSec','')" id="ContentPlaceHolder1_griduser_cell0_9_KullaniciSec_0" type="button" class="btn btn-default btn-xs">
<i class="fa fa-folder-open-o fa-2x"></i>Seç</button>
how to will be fix? And How to remove __doPostBack?
If i understood everything like you meant it:
<button onclick='return SecDegerler("23");' id="ContentPlaceHolder1_griduser_cell0_9_KullaniciSec_0" type="button" class="btn btn-default btn-xs">