$(document).ready(() => {
tableRenderer();
});
function tableRenderer() {
$.ajax({
method: "GET",
url: "/users",
dataType: "json",
success: (json) => {
console.log(json);
for (let i = 0; i < json.length; i++) {
// object's fields
let id = json[i].id;
let username = json[i].username;
let password = json[i].password;
// fields parsing
let tr = $('<tr/>').addClass(`table-row-${id}`);
tr.append(`
<td> ${id} </td>
<td> ${username} </td>
<td> ${password} </td>
<td>
<button type="submit" class="btn btn-info btn-sm" id="buttonEditUser"
onclick="editButton(${id}, '${username}', '${password}')"> edit </button>
<button type="submit" class="btn btn-danger btn-sm" id="buttonEditUser"
onclick="deleteButton(${id}, '${username}')"> delete </button>
</td>`);
$('table').append(tr);
}
}
});
}
function addButton() {
$('#addForm').validate({
rules: {
username: {
required: true,
remote: {
url: "/users/is_free",
type: "GET",
cache: false,
dataType: "json",
parameterData: {
username: function () {
return $("#username").val();
},
}
}
},
password: {
required: true,
minlength: 3
}
},
messages: {
username: {
required: "Nickname required! ",
remote: "User with this nickname already exists!"
},
password: {
required: "Password required",
minlength: "Password must contain >= 3 symbols"
}
},
submitHandler: function () {
$.ajax({
method: "POST",
url: `/users`,
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
username: $('#addForm #username').val(),
password: $('#addForm #password').val(),
})
});
window.location = "http://localhost:8080/";
location.reload();
}
});
}
<div class="container" th:fragment="addUserForm">
<div class="card rounded-0 border-top-0">
<h5 class="card-header"> Add new user </h5>
<div class="card-body">
<!-- ADD USER FORM -->
<div class="container d-flex justify-content-center">
<form id="addForm">
<!-- TEXT FIELD GROUP -->
<div class="form-group">
<label class="d-flex justify-content-center font-weight-bold" for="username"> Username </label>
<input class="form-control form-control-sm"
type="text" id="username" placeholder="nickname">
</div>
<div class="form-group">
<label class="d-flex justify-content-center font-weight-bold" for="password"> Password </label>
<input class="form-control form-control-sm"
type="password" id="password" placeholder="password">
</div>
<br>
<div class="container d-flex justify-content-center">
<button type="button" class="btn btn-success" id="buttonCreateUser" onclick="addButton()">
Create user
</button>
</div>
</form>
</div>
</div>
</div>
</div>