Displayed below is both my HTML and JavaScript code, utilizing Thymeleaf to dynamically render table content. The button's functionality changes based on the notified value - if it's 1, the button is disabled with a modified CSS style. When the value is different, users can click the button. Upon clicking, the worksomething() function is triggered. My objective is for a successful response to disable the button associated with the selected ID and update its CSS without reloading the page, mirroring the behavior when the notified value is 1.
function worksomething(orderId){
$.ajax({
url : "/myirl/"+ orderId,
type : 'GET',
contentType : "application/json",
dataType : "JSON",
success: function (response) {
alert("Disabled");
},
error: function (response) {
alert("work Failed");
}
});
}<table class="table" data-table ="all-orders" id="all-orders" role="grid">
<thead>
<tr>
<th>ID</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="order : ${orders}">
<td>
<button class="btn btn-link" th:text="${order?.orderId}"></button>
</td>
<td>
<button type="button" class="btn btn-warning btn-md"
th:disabled="${(order?.notified)} == 1"
th:style="${(order?.notified) == 1 ? 'background-color: red;border-color:red;' : 'background-color: #eea236;border-color:#eea236;'}"
th:onclick="|worksomething('${order?.orderId}')|">
Change</button>
</td>
</tr>
</tbody>
</table>