I'm currently into a place where I call an Api with Ajax to delete a Client from a table I've. The thing is, that I've previously tried to make a check before ajax is executed, but it doesn't seem to work.
So this time, when Delete button is clicked I want to check first if the user is sure he wants to delete the client, and if true, execute the function to delete it.
The thing is, I've the id into the button like this:
<td class="text-center">
<a type="button" class="btn btn-danger" value=('+value.id+') onclick="sureAboutDelete()">Delete Client</a>
</td>
And then in .js file I'm trying that:
// Check if user wants to delete Client
function sureAboutDelete(){
console.log((event.target));
// var id = Get the value of value attribute
// Ask for the user if he/she is sure about deleting
If (true){
// delete client using ID taken
deleteClient($id);
} else {
// Just close prompt
return;
}
}
When using "(event.target)" I can see all the button with the attributes, but putting "(event.target).val" or like this, I can not take the id I want.
Any suggestion?
Thanks !
First of:
value=('+value.id+')
in HTML is wrong for several reasons
value
is not a valid <a>
Element attribute. use data-value
instead.You need that data-value
beforehand, say from back-end, already embedded into your HTML
Anchor's type
cannot be "button"
it's used to specify the media type in the form of a MIME type (MDN <a>)
If
should be if
this
into your onclick="sureAboutDelete(this)"
The result should look like: (pure JS)
function sureAboutDelete(self) {
event.preventDefault(); // Since it's an anchor, don't scroll the page.
var id = self.dataset.clientid; // Get ID vrom data-clientid attribute
if( id && confirm("Delete client: "+ id) ) deleteClient( id );
}
function deleteClient( id ) {
console.log("DELETING CLIENT: %s", id);
// 1. DELTE FROM DATABASE
// 2. REMOVE ANY .clientId-N element from page
var elements = document.querySelectorAll(".clientId-"+ id);
if(!elements[0]) return;
for(var i=0; i<elements.length; ++i) {
elements[i].remove();
}
}
<table>
<tr class="clientId-2">
<td class="text-center">
<a type="button" class="btn btn-danger" data-clientid="2" onclick="sureAboutDelete(this)">Delete Client 2</a>
</td>
</tr>
<tr class="clientId-37">
<td class="text-center">
<a type="button" class="btn btn-danger" data-clientid="37" onclick="sureAboutDelete(this)">Delete Client 37</a>
</td>
</tr>
<tr class="clientId-56">
<td class="text-center">
<a type="button" class="btn btn-danger" data-clientid="56" onclick="sureAboutDelete(this)">Delete Client 56</a>
</td>
</tr>
</table>
or using jQuery: (PS: no need to onclick=
stuff)
$(document).on("click", "[data-delete-client]", function(evt) {
evt.preventDefault();
// 1. retrieve client ID
var id = $(this).data("delete-client");
// 2. confirm
if(!confirm("Really delete client: "+ id)) return; //do nothing if no confirmation, else:
// 3. delete from database
// (TODO)
// 4. remove all .clientId-N elements
$(".clientId-"+ id).fadeOut(400, function() {
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="clientId-2">
<td class="text-center">
<a class="btn btn-danger" data-delete-client="2">Delete Client 2</a>
</td>
</tr>
<tr class="clientId-37">
<td class="text-center">
<a class="btn btn-danger" data-delete-client="37">Delete Client 37</a>
</td>
</tr>
<tr class="clientId-56">
<td class="text-center">
<a class="btn btn-danger" data-delete-client="56">Delete Client 56</a>
</td>
</tr>
</table>
</div>
In jQuery, You can get the value
attribute by using attr()
method.
Reference : http://api.jquery.com/attr/
Example:
$(document).ready(function() {
$('.btn-danger').click(function() {
var sId = $(this).attr('value');
// Use confirm() to show a certain confirm alert message
var bConfirmMsg = confirm('Are you sure you want to delete this?');
if (bConfirmMsg === true) {
// delete client using ID taken
deleteClient(sId);
}
});
function deleteClient(sId) {
// rest of code...
}
});