I need your help...
Primary controller :
@Controller public class WaitingListController {
@Autowired
private WaitingListRepository waitingListRepo;
@Autowired
private DepartmentRepository depRepo;
@Autowired
private PatientRepository paitentRepo;
@Autowired
private SurgeonRepository surgeonRepo;
@GetMapping("/surgerywaitinglist")
public ModelAndView getAll() {
ModelAndView mav = new ModelAndView("list");
mav.addObject("waitinglist", waitingListRepo.findAll());
return mav;
}
@GetMapping(value="/surgerywaitinglist/patientSearch")
public ModelAndView patientSearch() {
ModelAndView mav = new ModelAndView("patientSearch");
Patient patient =new Patient();
mav.addObject("patient", patient);
return mav;
}
@GetMapping(value="/surgerywaitinglist/addProcedure")
public ModelAndView addProcedure( Long patientId) {
//public ModelAndView addProcedure() {
ModelAndView mav = new ModelAndView("addProcedure");
Patient patient = paitentRepo.findById(patientId).get();
List<Surgeon> surgeons = surgeonRepo.findAll();
List<Department> departments = depRepo.findAll();
WaitingList waitinglist = new WaitingList();
mav.addObject("patient", patient);
mav.addObject("surgeons", surgeons);
mav.addObject("departments", departments);
mav.addObject("waitinglist", waitinglist);
return mav;
}
@PostMapping(value="/surgerywaitinglist/saveToWaitinList")
public String saveToWaitinList(@ModelAttribute WaitingList waitinglist, Long patientId) {
if(waitinglist.getWaitingListId()==null) {
waitinglist.setWaitingListPatientId(patientId);
waitingListRepo.save(waitinglist);
}
else {
waitinglist.setWaitingListActualBookingDate(waitinglist.getWaitingListActualBookingDate());
waitinglist.setWaitingListAdditionDate(waitinglist.getWaitingListAdditionDate());
waitinglist.setWaitingListProcedure(waitinglist.getWaitingListProcedure());
waitinglist.setWaitingListDiagnosis(waitinglist.getWaitingListDiagnosis());
waitinglist.setWaitingListSurgeonId(waitinglist.getWaitingListSurgeonId());
waitinglist.setWaitingListDepartmentId(waitinglist.getWaitingListDepartmentId());
waitingListRepo.save(waitinglist);
}
return "redirect:/surgerywaitinglist";
}
}
Secondary Controller:
package com.WaitingListThymeleaf.controller;
@RestController public class SurgeonController {
@Autowired
private SurgeonRepository surgeonRepo;
@GetMapping("surgeons")
public List<Surgeon> getAll(){
return surgeonRepo.findAll();
}
@GetMapping("surgeon/{surgeonSpeciality}")
public List<Surgeon> findBySurgeonSpeciality(@PathVariable Long surgeonSpeciality) {
List<Surgeon> surgeons = surgeonRepo.findBySurgeonspeciality(surgeonSpeciality);
return surgeons;
}
}
HTML page (body only):
<body>
<div class="container">
<br />
<h3>Add New Procedure</h3>
<br />
<hr />
<br />
<form th:action="@{saveToWaitinList}" th:object="${waitinglist}"
method="POST">
<table class="table table-primary table-bordered table-striped"
id="employeeTable" style="width: 50%" align="center">
<thead>
</thead>
<tbody>
<tr>
<td>MRN</td>
<td th:text="${patient.patientId}"></td>
</tr>
<tr>
<td>Name</td>
<td
th:text="${patient.patientFirstName} +' '+ ${patient.patientLastName}"></td>
</tr>
<tr>
<td>Gender</td>
<td th:text="${patient.patientGender}"></td>
</tr>
<tr>
<td>Contact</td>
<td th:text="${patient.patientConact}"></td>
</tr>
<tr>
<td>Procedure</td>
<td><input type="text"
th:field="${waitinglist.waitingListProcedure}"
class="form-control col-4 mb-4" placeholder="Enter Procedure" />
</td>
</tr>
<tr>
<td>Diagnosis</td>
<td><input type="text"
th:field="${waitinglist.waitingListDiagnosis}"
class="form-control col-4 mb-4" placeholder="Enter Diagnosis" />
</td>
</tr>
<tr>
<td>Choose Department</td>
<td>
<div id="department">
<select th:field="${waitinglist.waitingListDepartmentId}"
onchange="showCustomer(this.value)">
<option th:each="department: ${departments}"
th:value="${department.departmentId}"
th:text="${department.departmentName}"></option>
</select>
</div>
</td>
<!-- <input type="text"
th:field="${waitinglist.waitingListDepartmentId}"
class="form-control col-4 mb-4" placeholder="Enter Department" /> -->
</tr>
<tr>
<td>Surgeon</td>
<td>
<div id="SurgeonId">
<select>
<option value="" disabled>Select Department First</option>
</select>
</div>
</td>
<!-- Before AJAX Implementation
<td><input type="text"
th:field="${waitinglist.waitingListSurgeonId}"
class="form-control col-4 mb-4" placeholder="Enter MRP" /></td>
-->
</tr>
<tr>
<td>Addition Date</td>
<td><input type="date"
th:field="${waitinglist.waitingListAdditionDate}"
class="form-control col-4 mb-4" placeholder="Pick Date" /></td>
</tr>
<tr>
<td>Acttual Booking Date</td>
<td><input type="date"
th:field="${waitinglist.waitingListActualBookingDate}"
class="form-control col-4 mb-4" placeholder="Pick Date" /></td>
</tr>
</tbody>
</table>
<br />
<hr />
<br /> <input type="hidden" th:field="${patient.patientId}" />
<div style="text-align: center;">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
<br /> <br />
<div style="text-align: center;">
<a th:href="@{/surgerywaitinglist}">Back To List</a>
</div>
</div>
JavaScript AJAX Code:
<script>
function showCustomer(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) {
document.getElementById("SurgeonId").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "/surgeon/" + str, false);
xmlhttp.send();
}
On the client side I get the pulled data as JSON as you can see:
How can I manipulate the pulled data into select/option tag in the HTML page?
.... Update....
I edited the AJAX script as follows:
<script>
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 log = xmlhttp.responseText;
//console.log(log);
//const res = JSON.parse(xmlhttp.responseText);
//Object.entries(res).forEach((entry) => {
// const [key, value] = entry;
// console.log(`${key}: ${value}`);
//});
/* xmlhttp.onload = function(){
var ourData = JSON.parse(xmlhttp.responseText);
console.log(ourData);
} */
//document.getElementById("SurgeonId").innerHTML = xmlhttp.responseText;
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>';
}
innerHTMLTest += ' </select>';
console.log(innerHTMLTest);
//document.getElementById("SurgeonId").innerHTML = ourData.surgeonId;
document.getElementById("SurgeonId").innerHTML = innerHTMLTest;
}
}
xmlhttp.open("GET", "/surgeon/" + str, false);
xmlhttp.send();
}
</script>
It seems it is working-is... In the console I get the following:
<select th:field="${waitinglist.waitingListSurgeonId}"> <option th:value="13505" th:text="Zah"></option> <option th:value="13000" th:text="Abdulkareem"></option> </select>
which is exactly what I needed... However, nothin shows on the template as you can see :
Today's update :)
Apparently, the code works even though it not showing in the select/option as you can see in the attached image below ! When I inspect the document.body (DOM) in the background... It is there! but not visible... I checked the database... the mySQL INSERTed successfully !
Here is the screenshot of the MySQL Workbench:
Successfully added !
