I've successfully used thymeleaf in the past, but I'm having trouble implementing it with JavaScript and Ajax get requests.
Essentially, I have a table that is generated dynamically. In my HTML script, an Ajax get request fetches and displays a list of teams in this table. Is there a way to include a link or button after each row that sends the team's ID to my controller when clicked?
Below is my current controller:
$(document).ready(function() {
// Perform GET request
$.ajax({
type: "GET",
url: "/all",
success: function(result){
$.each(result, function(i, team){
var customerRow = '<tr>' +
'<td>' + team.id + '</td>' +
'<td>' + team.teamName.toUpperCase() + '</td>' +
'<td>' + team.teamAddress + '</td>' +
'<td>' + team.level + '</td>' +
'<td>' + '<a href="@{/viewteam/{id}(id={team.id})}">' + View Team + '</a></td>' +
'</tr>';
$('#customerTable tbody').append(customerRow);
});
$("#customerTable tbody tr:odd").addClass("info");
$("#customerTable tbody tr:even").addClass("success");
},
error: function(e) {
alert("ERROR: ", e);
console.log("ERROR: ", e);
}
});
// Filter data on view
$("#inputFilter").on("keyup", function() {
var inputValue = $(this).val().toLowerCase();
$("#customerTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(inputValue) > -1)
});
});
})
You can see my attempt at implementing it in the 5th <td> tag.
This is the controller where I will pass the ID variable:
@RequestMapping(value="/viewteam/{id}", method=RequestMethod.GET)
public String ViewTeam(Model model, @PathVariable Long id) {
Team team = teamRepository.findOne(id);
// The code below ideally returns all players associated with the above team ID in an array list, which will be passed via thymeleaf to display all players
model.addAttribute("team", team);
return "singleteam";
}