Clicking a button and detect its status in jquery - javascript

I am have a button like this:
<a class="btn btn-sm btn-danger employee" data-emp_id="23" href="javascript:void(0)" disabled>Resign</a>
If ajax response success it adds disabled to this button.
Here I need to this button has disabled on click event. If it has, need to alert different message, or if it hasn't I need to alert different message.
This is how I tried it.
$(document).on('click', 'a.employee', function(e){
var empID = $(this).data('emp_id');
if($(this).is(':disabled')) {
alert('message1');
} else {
alert('message2');
}
});
Also tried it something like this:
$(document).on('click', 'a.employee:not(:disabled)', function(e){
var empID = $(this).data('emp_id');
alert('here');
});
But, both are not working for me..
Hope somebody may help me out.
Thank you.

You cannot disable an anchor element, and adding a disabled attribute to it would mean that your HTML is invalid.
To solve this you could simply add a class to the element and key the click behaviour on that. Try this:
$(document).on('click', 'a.employee', function(e) {
e.preventDefault();
var empID = $(this).data('emp_id');
if ($(this).hasClass('disabled')) {
console.log('message1');
} else {
console.log('message2');
}
});
.disabled {
color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn btn-sm btn-danger employee disabled" data-emp_id="23" href="#">Disabled</a>
<a class="btn btn-sm btn-danger employee" data-emp_id="23" href="#">Not disabled</a>
Also note the use of preventDefault() instead of adding javascript: to the href attribute of the a element.

Disabled is not an attribute and hence not a property of anchor tag
try this way
$(document).on('click', 'a.employee[disabled])', function(e){
var empID = $(this).data('emp_id');
alert('here');
});

Related

jQuery disable anchor tag bootstrap button onClick

I want to disable my bootstrap button on-click using Javascript, to prevent a double-click in order to avoid DbContext threading issues.
<a type="button" class="btn btn-success" id="BackBtn" asp-area="" asp-controller="PageStuff" asp-action="PageStuff" asp-route-culture="#CultureInfo.CurrentCulture.Name">#_loc[Model.BackButton]</a>
This works as expected and hides the button:
$("#BackBtn").on("click", function () {
document.getElementById("BackBtn").style.display = "none";
});
This does not disable the button, but works elsewhere in my app for other elements:
$("#BackBtn").on("click", function () {
document.getElementById("BackBtn").disabled = true;
});
I have also tried using document.getElementById("BackBtn").unbind("click"); as mentioned here.
And this document.getElementById("BackBtn").prop("disabled", true);
and this $("#BackBtn").prop("disabled", "disabled");
and this $('BackBtn').prop("disabled", true);
and this document.getElementById("BackBtn").attr("disabled", "disabled");
and this $("#values:BackBtn").attr("disabled", true);
and this $("#BackBtn").attr("disabled", true);
and this $('BackBtn').attr('readonly', true);
and this [...document.querySelectorAll('BackBtn')].map(e => e.disabled = true);
and various other variations.
Any ideas how I can get the button to disable on click? Does 'disabled' even exist for an anchor tag of type="button" ? Im starting to think there is no such property.
The disabled attribute works only on button, for anchor tag you can use pointer-events: none;
$("#BackBtn").on("click", function() {
$(this).css('pointer-events', 'none')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a type="button" class="btn btn-success" id="BackBtn" asp-area="" asp-controller="PageStuff" asp-action="PageStuff" asp-route-culture="#CultureInfo.CurrentCulture.Name" href="#">Dsiable me</a>

Call a javascrtipt after button click

I need to call a JavaScript after pressing a button with type button.
<button type='button'
class='btn btn-sm btn-primary pull-right m-t-n-xs'
style='width: 100%;' id='demo' onclick='demo();'>
<strong>Edit</strong>
</button>
I've tried the JavaScript below but it has errors
$('#demo').click(function() {
alert('hey');
});
For the JS above, it doesn't have an error but it doesn't alert..
document.getElementById("demo").onclick = function() { myFunction() };
function myFunction() {
alert('hey');
}
The error for the js above is : Uncaught TypeError: Cannot set property 'onclick' of null at HTMLDocument.
window.onload = function() {
document.getElementById("demo").onclick=function() {
alert("Hello WOrld");
}
}
The error for this last one is:
Uncaught TypeError: Cannot set property 'onclick' of null
at window.onload
$('#demo').click(function() {
console.log('hey');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' class='btn btn-sm btn-primary pull-right m-t-n-xs' style='width: 100%;' id='demo'>
<strong>Edit</strong>
</button>
I have removed the irrelevant parts of you code to simplify the answer. Here is a simpler HTML:
<button id="demo">Edit</button>
Note that you should not include JavaScript in the onclick attribute. That’s old school, and will only make your life more miserable.
Here is some sample JavaScript:
window.onload=function() {
var button=document.querySelector('button#demo');
button.onclick=doit;
}
function doit() {
alert('clicked');
}
You certainly don’t need jQuery for this sort of thing.
For what it’s worth, you probably shouldn’t be using the style attribute either — that’s what the class attribute is there for. Also don’t use strong inside the button. It is semantically incorrect, and, if you want to text to be bold, use CSS on the button itself.
Here is the complete example:
button is created with button type and onclick function is bonded.
<button type="button" onclick="onClickHandler()">Click Me!</button>
`<script>
// This function gets triggered when button is clicked.
function onClickHandler(){
alert("JS rocks");
}
</script>`

Identify the Click Event in bootstrap touch spin

I am little bit confusion to find the click event in the class using jquery.
my question is how to identify whether I click touchspin down or up
I am using bootstrap touch spin.
<button type="button" class="btn btn-default bootstrap-touchspin-down">-</button>
<input type="number" value="18" onchange="calculatetotal(3)" style="width: 100%; padding: 0px; display: block;" class="ex_limit form-control" readonly="" id="qty3">
<button type="button" class="btn btn-default bootstrap-touchspin-up">+</button>
I Want to calculate some process in when Up botton clicked and some process in down button click.
Here I try to Identify the button using class.
$('.btn, .btn-default, .bootstrap-touchspin-down').click(function(){
alert("down!");
});
Please help me to do this task.
$('[class*="bootstrap-touchspin-"]').click(function(event) {
var $this = $(this);
if ($this.hasClass('bootstrap-touchspin-down')) {
alert('down');
} else if ($this.hasClass('bootstrap-touchspin-up')) {
alert('up');
}
});
Alternatively:
$('.bootstrap-touchspin-down').click(function(event) {
alert('down');
});
$('.bootstrap-touchspin-up').click(function(event) {
alert('up');
});
better and easy way is to handle change event like given below
$('input[name=\'cart-quantity\']').on("change",function(event){
alert("hi")
})

JQuery event handler not firing after changing class

I'm trying to have the span, on click, toggle its classes between .btn-warning and .btn-primary. However, my code only works for the first click. Every click thereafter doesn't work.
JavaScript
$(document).ready(function(){
$('.btn-warning').on('click',function(){
$(this).removeClass('btn-warning').addClass('btn-primary');
});
$('.btn-primary').on('click',function(){
$(this).removeClass('btn-primary').addClass('btn-warning');
});
});
HTML
<span class="btn btn-warning" >Click me</span>
Changing the class does not magically add the events that were previously added. You either need to unbind/bind the events once again, or use a generic onclick handler that knows how to handle it, or use event delegation.
All that code could be reduced to:
$(".btn").on("click", function() {
$(this).toggleClass('btn-warning').toggleClass('btn-primary');
});
.btn-primary { background-color: blue; }
.btn-warning { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="btn btn-warning" >Click me</span>
You need to use event delegation method because you're binding event to dynamically added class element:
$(document).ready(function(){
$(document).on('click','.btn-warning',function(){
$(this).removeClass('btn-warning').addClass('btn-primary');
});
$(document).on('click','.btn-primary',function(){
$(this).removeClass('btn-primary').addClass('btn-warning');
});
});
Simply you may do like this:
$(document).on("click",".btn", function() {
$(this).toggleClass('btn-warning btn-primary');
});

Jquery a .Show() is not fully working

I have two functions. One that hides a Edit and Delete button, and shows a Save button, and another one that does the opposite (hides save, shows edit and delete).
Right now the first button works: Save appears and Edit/Delete disappear, but the second function does not work: It hides Save but only shows Delete...somehow Edit is not being shown.
button code within a <td>
<td class="col-lg-3 col-lg-offset-1">
<span style="visibility:hidden" class="ID">#Html.DisplayFor(modelItem => item.ID)</span>
<span class="item-edit-button">
<button type="button" onclick="someFunction(this)" class=" btn btn-warning col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
</span>
<span class="item-save-button">
<button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
</span>
<span class="item-delete-button"> // no use right now - ignore
<button type="button" onclick="deleteFunction(this)" class="btn btn-danger col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</span>
</td>
the JQuery
<script>
function someFunction(element)
{
$(element).hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
}
function saveFunction(element)
{
$(element).hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
}
</script>
http://jsfiddle.net/isherwood/BrP2a/
Hopefully I am just making some silly mistake.
ANSWER
I was accidentally hiding the button, not the span, thus when I tried to show my edit button's span it did not work as the button itself was hidden originally to fix this I had to use.
function someFunction(element) {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
}
function saveFunction(element) {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
}
You have hide the actual button by $(element).hide(); in someFunction and you are showing item-edit-button span so actual button is still hidden. Try this,
function saveFunction(element)
{
$(element).hide();
$(element).closest("td").find("span.item-edit-button button").show();
$(element).closest("td").find("span.item-delete-button").show();
}
You have to define the function before your HTML elements that mean if your elements are in body tag then you have to define the function in the head tag
then you can change the code little bit
function someFunction(element)
{
$(element).hide();
$(element).siblings("span.item-save-button").show();
$(element).siblings("span.item-delete-button").hide();
}
function saveFunction(element)
{
$(element).hide();
$(element).siblings("span.item-edit-button").show();
$(element).siblings("span.item-delete-button").show();
}
Here is the working fiddle for the code
http://jsfiddle.net/murli2308/YeZDe/
I think the problem is your use of the .closest() function, which finds the nearest parent of the given selector, starting with the selected element. See documentation for closest().
You probably are intending to use the .prev() and .next() functions.
You are hiding the Element (the button) but them Showing the TD. So the result is TD is visible but button itself is still hidden.
Here is the working code:
function someFunction(element)
{
$(element).closest("td").find("span.item-edit-button").hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
}
function saveFunction(element)
{
$(element).closest("td").find("span.item-save-button").hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
}
This doesn't answer your question directly, but I think it presents a simplification of your code that may help.
http://jsfiddle.net/isherwood/BrP2a/4/
<button id="item-edit" ...>...Edit</button>
...
$('#item-edit').click(function () {
$(this).hide();
$('#item-save').show();
$('#item-delete').hide();
});
$('#item-save').click(function () {
$(this).hide();
$('#item-edit, #item-delete').show();
});

Categories