How can I make my Delete Entry Button Functional - html

Question

Pardon my novice as I am new to coding. I have been trying to get my delete button to work both on my webpage and mysql, but my delete button just takes me to a url /delete page. I do not get any errors, but my confirm delete button does not remove the entry, but takes me to another blank page. If any advice could be spared it would be greatly appreciated. Here is some code, if more is need let me know. Thanks again.
<template>
<div class="between:flex bottom:margin-3">
<div class="center: flex-items">
<span class="right:margin-1">Show</span>
<select v-model="currentEntries" class="select" #change="paginateEntry">
<option v-for="se in showEntries" :key="se" :value="se">
{{ se }}
</option>
</select>
<span class="left:margin-1">Entries</span>
<div class="end:flex"></div>
</div>
</div>
<div id="tableHolderDiv">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Location</th>
<th scope="col">End User</th>
<th scope="col">Order Number</th>
<th scope="col">Date</th>
<th scope="col">Application</th>
<th scope="col">Service Tech</th>
<th scope="col">Department</th>
<th scope="col">Hours</th>
<th scope="col">Travel Hours</th>
<th scope="col">Contact Name</th>
<th scope="col">Reason</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in serviceEntries"
:key="row.id"
#click="alertID(row.id)"
>
<th scope="row">{{ row.id }}</th>
<td>{{ row.location }}</td>
<td>{{ row.end_user }}</td>
<td>{{ row.order_number }}</td>
<td>{{ row.date }}</td>
<td>{{ row.application }}</td>
<td>{{ row.service_tech }}</td>
<td>{{ row.department }}</td>
<td>{{ row.hours }}</td>
<td>{{ row.travel_hours }}</td>
<td>{{ row.contact_name }}</td>
<td>{{ row.reason }}</td>
<a
href="/delete/{{this.id}}"
type="button"
class="btn btn-light btn-small"
onclick="event.stopPropagation(); return confirm('Are you sure you want to delete this entry?');"
><i class="bi bi-trash"></i> Delete</a
>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "ServiceTable",
computed: {
serviceEntries() {
return this.$store.state.serviceEntries;
},
},
methods: {
alertID(id) {
this.$router.push({
path: `/modify/${id}`,
});
},
},
async onDelete() {
if (!confirm("Are you sure you want to delete this entry?")) {
return;
}
await axios.delete(`/api/service/delete/${this.id}`);
},
alertID(id) {
this.$router.push({
path: `/modify/${id}`,
});
},
};
</script>
This is in my index.js
async deleteServiceEntry() {
return new Promise((resolve, reject) => {
axios({
method: "delete",
url:
prefix +
"/api/service/delete/",
headers: { "Content-Type": "application/json" }
})
.then(function(response) {
//handle success
console.log(response);
resolve(true);
})
.catch(function(response) {
//handle error
console.log(response);
reject(false);
});
});
},
This is in my app.js
app.delete("/api/service/:id", (req, res) => {
// console.log("DELETE /api/user/" + req.params.id + " called");
pool.query(
"DELETE FROM `master` WHERE id = ?",
[req.params.id],
function (error, results, fields) {
if (error) res.json(error);
else res.json(results);
}
);
});
app.delete("/api/service/:id", (req, res) => {
pool.query(
"DELETE FROM `master` WHERE id= ? AND location = ? AND end_user = ? AND order_number = ? AND date = ? AND application = ? AND service_tech = ? AND department = ? AND hours = ? And travel_hours = ? AND contact_name = ? AND reason = ?",
[req.params.id, req.params.location, req.params.end_user, req.params.order_number, req.params.date, req.params.application, req.params.service_tech, req.params.department, req.params.hours, req.params.travel_hours, req.params.contact_name, req.params.reason],
function (error, results, fields) {
if (error) res.json(error);
else res.json(results);
}
);
});

Answer 1

It is redirecting to a new page because of the href link in the anchor tag. You should call the method deleteServiceEntry on the click and it should work fine. What you can do is:
<a
href="#"
type="button"
class="btn btn-light btn-small"
#click="deleteServiceEntry($event,row.id)"
><i class="bi bi-trash"></i> Delete</a
>
Then in the method:
async deleteServiceEntry(event,id) {
event.preventDefault();
const verify = confirm("Are you sure you want to delete this entry?");
if (verify) {
return new Promise((resolve, reject) => {
axios({
method: "delete",
url:
prefix +
"/api/service/delete/"+id,
headers: { "Content-Type": "application/json" }
})
.then(function(response) {
//handle success
console.log(response);
resolve(true);
})
.catch(function(response) {
//handle error
console.log(response);
reject(false);
});
});
},
}
Hope this was helpful.