JavaScript isn’t parsed through the Thymeleaf interpreter. When you have this code in JavaScript:
'<option th_value="'+ ourData[i].surgeonId + '" th_text="' + ourData[i].surgeonLastName + '"> </option>'
The browser sees
<option th_value="13505" th_text="Zah"></option>
th:value isn’t a valid HTML attribute, nor is th:text. Those attributes are only only understood by the Thymeleaf interpreter. If you want your JavaScript to work, you have to use regular HTML attributes.
'<option value="'+ ourData[i].surgeonId + '">' + ourData[i].surgeonLastName + '</option>'
Which will output:
<option value="13505">Zah</option>
You will have to fix th_field="${waitinglist.waitingListSurgeonId}" as well.
Thanx to Maksim Zagorodsky in his post here
I managed to solve it 🙂
The HTML code:
<!DOCTYPE html>
<html lang="en" xmlns_th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Add Procedure Form</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function sendAjaxRequest() {
var department = $("#department").val();
$.get(
"http://localhost:8080/surgerywaitinglist/getSurgeonsByDep?department="
+ department, function(data) {
$("#surgeonId").empty();
data.forEach(function(item, i) {
var option = "<option value = " + item + ">" + item
+ "</option>";
$("#surgeonId").append(option);
});
});
};
</script>
<script>
$(document).ready(function() {
$("#department").change(function() {
sendAjaxRequest();
});
});
</script>
</head>
<body>
<div class="container">
<br />
<h3>Add New Procedure</h3>
<br />
<hr />
<br />
<form th_action="@{/surgerywaitinglist/saveToWaitinList}" th_object="${waitinglist}"
method="POST">
<table class="table table-primary table-bordered table-striped"
id="employeeTable" style="width: 50%" align="center">
<tbody>
<tr>
<td>Department</td>
<td>
<div class="form-group">
<select name="departmentName"
th_with="departmentName = ${department.departmentName}"
class="form-control" id="department">
<option value="" th_selected="selected" th_disabled="disabled">select
option</option>
<option th_each="department: ${departments}"
th_value="${department.departmentName}"
th_text="${department.departmentName}"></option>
</select>
</div>
</td>
</tr>
<tr>
<td>Surgeon</td>
<td>
<div class="form-group">
<select th_field="${surgeon.surgeonLastName}"
class="form-control" id="surgeonId">
</select>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Now I do get the expected outcome as you can see in the images below:
I have a JSON data retrieved from Spring boot controller as:
[
{
"surgeonId": 13505,
"surgeonNationalID": 308236823,
"surgeonFirstName": "Ali",
"surgeonLastName": "Zah",
"surgeonNationality": "UK",
"surgeonDateOfBirth": "1969-03-10T21:00:00.000+00:00",
"surgeonGender": "Male",
"surgeonAddress": "322 Diplomatic Dist.",
"surgeonConact": "02277469",
"surgeonEmailAddress": "[email protected]",
"surgeonSpeciality": "GS",
"departmentIdInSurgery": 31
},
{
"surgeonId": 13000,
"surgeonNationalID": 492487233,
"surgeonFirstName": "Sami",
"surgeonLastName": "Abdulkareem",
"surgeonNationality": "Canada",
"surgeonDateOfBirth": "1960-12-11T21:00:00.000+00:00",
"surgeonGender": "Male",
"surgeonAddress": "74 Aiano Dis.",
"surgeonConact": "02323322",
"surgeonEmailAddress": "[email protected]",
"surgeonSpeciality": "GS",
"departmentIdInSurgery": 31
}
]
And HTML as:
<td>
<div id="SurgeonId">
<select >
<option value="" disabled>Select Department First</option>
</select>
</div>
</td>
And this is the JavaScript code in the HTML page:
<script type ="text/javascript">
function showSurgeons(str) {
var xmlhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var ourData = JSON.parse(xmlhttp.responseText);
var innerHTMLTest = '<select th_field="${waitinglist.waitingListSurgeonId}"> ';
for(i=0; i<ourData.length; i++){
innerHTMLTest +=' <option th_value="'+ ourData[i].surgeonId + '" th_text="' + ourData[i].surgeonLastName + '"> </option>';
console.log('inside loop' + innerHTMLTest);
}
innerHTMLTest += ' </select>';
console.log(innerHTMLTest);
alert(document.getElementById("SurgeonId").innerHTML);
document.getElementById("SurgeonId").innerHTML = innerHTMLTest;
}
}
xmlhttp.open("GET", "/surgeon/" + str, false);
xmlhttp.send();
}
</script>
However, I do not get the expected outcome as you can see in the images below:
The database missing the surgeonId data!
Also, as you can see below, I tried to inspect the code which seems right!
Thank you for the time spent guys 🙂
thank you,,, that definitely is gonna help,,, but by then Thymeleaf won’t work… I do not want to miss the Thymeleaf … Is there a way to cast the JavaScrtipt data to make it work with Thymeleaf ?
Metroids explained it right ….. This code needs to be fixed ! any ideas?
