We Keep Coding

Clicking a button and detect its status in jquery

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');
});

How to make a button visible by clicking another button?

How can I make the button save visible when I click the edit button? This is my code so far, but it happends nothing. I'm working in a jsp
<INPUT TYPE="BUTTON" VALUE="Edit" ONCLICK="btnEdit()" class="styled-button-2">
<INPUT TYPE="BUTTON" VALUE="Save" ONCLICK="btnSave()" class="styled-button-2" style="visibility:hidden;" id="save">
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementsById("save").style.visibility="visible";}
}
</script>

DEMO
It is considered bad practice to add onclick in your html, and you miss-spelled a method. You should equally avoid adding your css in your html as well.
HTML:
<INPUT TYPE="BUTTON" VALUE="Edit" class="styled-button-2" id="edit">
<INPUT TYPE="BUTTON" VALUE="Save" class="styled-button-2" id="save">
JS:
var edit = document.getElementById("edit");
var save = document.getElementById("save");
edit.onclick = function() {
save.style.visibility = "visible";
}
CSS:
#save {
visibility: "hidden";
}

Must be a long day.
You have a misspelling.
Not right
document.getElementsById
Right Way
document.getElementById

document.getElementById("save").style.visibility="visible";
use getElementById not getElementsById

Probably a simple error, but you wrote getElementsById not getElementById, which meant you were trying to get more than one element, when infact you only need to get the "save" button.
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementById("save").style.visibility="visible";}
}
</script>
Side note: You may want to tidy your code:
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
document.getElementById("save").style.visibility="visible";
}
</script>

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();
});

JQuery bind on ajax HTML and get class instance value

I am using the Jquery's load method to return results based on the user's input:
$('#textbox').bind('input propertychange', function() {
$('#textbox').load('searchurl/'+$("#textbox").val() );
});
I need my loaded content to still respond to clicks so I use this code:
$(document).on("click", '.lightbox', function(event) {
//do some stuff
});
At this point everything is going good. However I would like to get an attribute from my .lightbox class. this.attr will reference the document not the .lightbox class that was clicked. How do I reference .lightbox attributes?

As #Ehsan already said in the comments, $(this).attr() will do what you want. I made a small jsFiddle example:
<input type="button" value="click me" class="lightbox" id="attr1">
<input type="button" value="click me" class="lightbox" id="attr2">
<input type="button" value="click me" class="lightbox" id="attr3">
$(document).on("click", '.lightbox', function(event) {
alert($(this).attr("id"))
});

Javascript: Run a script depending on which button is clicked

Can someone enlighten me on this please. I was trying to implement a simple Javascript function. The idea is, to run a conditional script depending on which button is clicked. Can't seem to figure this out:
<script type="text/javascript">
function whichButton(){
if(//Button 1 is clicked...){
//Run script 1
}
else if(//Button 2 is clicked){
//Run script 2
}
else if(//Button 3 is clicked){
//Run script 3
}
else if(//Button 4 is clicked){
//Run script 4
}
else{
//Do nothing
}
}
</script>
<form id="form1" onSubmit="whichButton();">
<button id="btn1">Button 1</button><br/>
<button id="btn2">Button 2</button><br/>
<button id="btn3">Button 3</button><br/>
<button id="btn4">Button 4</button><br/>
</form>
Thanks in advance!

You want to add onclick handlers to the button tags:
<script type="text/javascript">
function whichButton(buttonElement){
alert(buttonElement.id);
var buttonClickedId = buttonElement.id;
if( buttonClickedId === 'btn1' ){
// do btn1 stuff
}
else if( buttonClickedId === 'btn2' ){
// do btn2 stuff
}
// ...
else{
// don't know which button was clicked
}
}
</script>
<form id="form1" >
<button id="btn1" onclick="whichButton(this)">Button 1</button><br/>
<button id="btn2" onclick="whichButton(this)">Button 2</button><br/>
<button id="btn3" onclick="whichButton(this)">Button 3</button><br/>
<button id="btn4" onclick="whichButton(this)">Button 4</button><br/>
</form>
EDIT:
To run different code based on which button was clicked, use an IF statement similar to your original post, which I've edited above. // you can take that alert out, or move into each if/else if scope.

Pass the from to your function, then find the active element:
<form id="form1" onSubmit="whichButton(this);">
Buttons...
</form>
And the JavaScript:
function whichButton(form) {
var clicked = form.querySelector(":active");
switch(clicked.id) {
case "btn1":
// do stuff
break;
// add more cases
}
}
Note that I'm not certain about this, but I've tested it and it seems to work. Note that IE7 and older do not support :active, I have no idea how to make this work in those older versions.
EDIT: Here's a Fiddle to demonstrate.

You can try with jQuery the following:
<script type="text/javascript">
$(document).on("click", "button.btn", function(){
console.log("You clicked " + $(this).html());
return false;
});
</script>
<form>
<button class="btn">Button 1</button><br/>
<button class="btn">Button 2</button><br/>
<button class="btn">Button 3</button><br/>
<button class="btn">Button 4</button><br/>
</form>

Use AJAX to get the scripts, insert them somewhere in the DOM and use initialize() to run them.
$.get('js/script1.js', function(data) {
$('#dummydiv').html(data);
initialize();
});