Solution 1 :

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.

Solution 2 :

Thanx to Maksim Zagorodsky in his post here

I managed to solve it 🙂

The HTML code:

<!DOCTYPE html>
<html lang="en" xmlns_th="">
<meta charset="ISO-8859-1">
<title>Add Procedure Form</title>
    href="[email protected]/dist/css/bootstrap.min.css"
    function sendAjaxRequest() {
        var department = $("#department").val();
                        + department, function(data) {
                    data.forEach(function(item, i) {
                        var option = "<option value = " + item + ">" + item
                                + "</option>";
    $(document).ready(function() {
        $("#department").change(function() {


    <div class="container">
        <br />
        <h3>Add New Procedure</h3>
        <br />
        <hr />
        <br />
        <form th_action="@{/surgerywaitinglist/saveToWaitinList}" th_object="${waitinglist}"

            <table class="table table-primary table-bordered table-striped"
                id="employeeTable" style="width: 50%" align="center">

                            <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 th_each="department: ${departments}"



                            <div class="form-group">


                                <select th_field="${surgeon.surgeonLastName}"
                                    class="form-control" id="surgeonId">






Now I do get the expected outcome as you can see in the images below:

enter image description here

Problem :

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:

    <div id="SurgeonId">                        
        <select >
            <option value="" disabled>Select Department First</option>

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 = "";
        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>';
                document.getElementById("SurgeonId").innerHTML = innerHTMLTest;

        }"GET", "/surgeon/" + str, false);

However, I do not get the expected outcome as you can see in the images below:
enter image description here

The database missing the surgeonId data!

Also, as you can see below, I tried to inspect the code which seems right!

enter image description here

Thank you for the time spent guys 🙂


Comment posted by Metroids

Thymeleaf tags such as

Comment posted by AdelLinux80s

Thanx ,,, but would you elaborate ? or give example?

Comment posted by AdelLinux80s

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 ?

Comment posted by AdelLinux80s

Is there a way around to maneuver? or a better idea ?

Comment posted by AdelLinux80s

Metroids explained it right ….. This code needs to be fixed ! any ideas?