So, when you click on the "delete" button, the data from the table is not deleted, that is, nothing happens.
There are no errors in the console. It looks like the delete function is basically not being handled here.
How can this be fixed?
My files:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cars Selling</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="listCarsSelling.js"></script>
<script src="delete.js"></script>
</head>
<body>
<h2>Cars Selling List</h2>
<p><a href="/insert">Insert new position</a></p>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<th>code</th>
<th>manufacturer</th>
<th>model</th>
<th>color</th>
<th>transmission</th>
<th>body_type</th>
<th>price</th>
<th>action</th>
</tr>
</table>
</body>
</html>
listCarsSelling.js
$(document).ready(function() {
$.getJSON('/ListCarsSelling', function(json) {
var tr=[];
for (var i = 0; i < json.length; i ) {
tr.push('<tr>');
tr.push('<td>' json[i].code '</td>');
tr.push('<td>' json[i].manufacturer '</td>');
tr.push('<td>' json[i].model '</td>');
tr.push('<td>' json[i].color '</td>');
tr.push('<td>' json[i].transmission '</td>');
tr.push('<td>' json[i].body_type '</td>');
tr.push('<td>' json[i].price '</td>');
tr.push('<td><button id="updatePosition">Update</button> '
'<button id="deletePosition">Delete</button></td>');
tr.push('</tr>');
}
$('table').append($(tr.join('')));
});
});
delete.js
$(document).ready(function() {
$('#deletePosition').click(function() {
var code = $(this).attr('code');
$.ajax({
url: '/ListCarsSelling/' code,
method: 'DELETE',
contentType: "application/json",
dataType : 'json',
success: function () {
window.location = '/'
},
error: function (error) {
alert(error);
}
});
});
});
Rest Controller
package lab3.Controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import lab3.DAO.CarSellingDAO;
import lab3.Model.CarSelling;
@RestController
public class CarSellingController {
@Autowired
private CarSellingDAO csDAO;
@DeleteMapping("/ListCarsSelling/{code}")
public String delete(@PathVariable Integer code) {
return csDAO.deletePosition(code) " position delete from the database";
}
/*...other*/
}
After my update, everything now works more or less. But, there is a problem with reloading the page after deleting. Here's what I changed:
$(document).on( "click" ,"#deletePosition", function() {
var code = $(this).attr('value');
console.log(code);
$.ajax({
url: '/ListCarsSelling/' code,
type: 'DELETE',
contentType: "application/json",
dataType : 'json',
success: function () {
window.location = '/'
},
error: function (error) {
alert(error);
}
});
});
and this part in another .js file:
'<button id="deletePosition" value=' json[i].code '>Delete</button></td>');
After pressing the button, a window pops up. I click ok and I have to refresh the page manually to update the database itself. How to make it all happen automatically?
page after clicking the delete button
CodePudding user response：
After the last update, I was able to deal with the problem. It consisted of only one line. Final solution / changes in two files:
$(document).on( "click" ,"#deletePosition", function() {
var code = $(this).attr('value');
var rowToDelete = $(this).closest('tr');
console.log(code);
$.ajax({
url: '/ListCarsSelling/' code,
type: 'DELETE',
contentType: "application/json",
//dataType : 'json', //<---success was not processed because of this
success: function () {
rowToDelete.remove(); //<--- it's better than reloading the page. Just remove line from html
},
error: function (error) {
alert(error);
}
});
});
$(document).ready(function() {
$.getJSON('/ListCarsSelling', function(json) {
var tr=[];
for (var i = 0; i < json.length; i ) {
tr.push('<tr>');
tr.push('<td>' json[i].code '</td>');
tr.push('<td>' json[i].manufacturer '</td>');
tr.push('<td>' json[i].model '</td>');
tr.push('<td>' json[i].color '</td>');
tr.push('<td>' json[i].transmission '</td>');
tr.push('<td>' json[i].body_type '</td>');
tr.push('<td>' json[i].price '</td>');
tr.push('<td><button id="updatePosition">Update</button> ' // <--- the refresh button has yet to be updated, but that's a completely different story
'<button id="deletePosition" value=' json[i].code '>Delete</button></td>');
tr.push('</tr>');
}
$('table').append($(tr.join('')));
});
});
now everything works. Hooray!:)