我想显示一个特定的用户信息的帮助下,引导模式点击'查看'按钮。单击后,模态不会打开,数据也不会填充在模态中。
这是我的模式代码:
<body>
<!-- Modal -->
<div th:fragment="_modals" class="modal fade" role="dialog" id="viewModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<center> <h5 class="modal-title" id="exampleModalLabel">Complainant Information</h5></center>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td style="width: 35%">Date of Complainant:</td>
<td th:text="${complaintPdfBean.finalSubmit}"></td>
<td>Reference No:</td>
<td th:text="${complaintPdfBean.refno}"></td>
</tr>
<tr>
<td colspan="4" class="table-head font-weight-bold">Complainant
Details:</td>
</tr>
<tr>
<td>Name:</td>
<td colspan="3" th:text="${complaintPdfBean.cName}"></td>
</tr>
<tr>
<td>Father/Husband:</td>
<td colspan="3" th:text="${complaintPdfBean.cFatherHusbandName}"></td>
</tr>
<tr th:text="${complaintPdfBean.cAddress1 == null}">
<td>Address:</td>
<td colspan="3">
<p
th:text="${complaintPdfBean.cAddress1+','+complaintPdfBean.cAddress2}"></p>
<p
th:text="${complaintPdfBean.cPostOffice+','+complaintPdfBean.cPin}"
th:hidden="${#lists.isEmpty(complaintPdfBean.cPin)}"></p>
<p
th:text="${complaintPdfBean.cDistrict+','+complaintPdfBean.cState}"
th:hidden="${#lists.isEmpty(complaintPdfBean.cDistrict)}"></p>
</td>
</tr>
<tr>
<td>Gender:</td>
<td colspan="3" th:text="${complaintPdfBean.cGender}"></td>
</tr>
<tr>
<td>Age:</td>
<td colspan="3" th:text="${complaintPdfBean.age}"></td>
</tr>
</table>
</div>
</div>
</div>
</body>
这是我在另一个页面上的代码,我正在触发模式按钮:
<div class="col">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1" data_id="${refno}">Click </button>
</div>
对于视图按钮可用的页面的模式使用,我使用以下代码:
<th:block th:replace="_modals :: modal('exampleModal1')">modal</th:block>
这是js代码:
<script type="text/javascript">
$('#exampleModal1').on('show.bs.modal', function(event) {
alert("kjkjfjgfkjgkjgjgjgjg");
console.log($(event.relatedTarget).attr('data_id'))
var refno = $(event.relatedTarget).attr('data_id')
$.get("/viewComplaintByofficemodal/" + refno, function(data) {
$('#exampleModal1').find('.modal-body').html(data);
})
});
</script>
这是控制器代码:
@GetMapping("viewComplaintByofficemodal/{refno}")
@ResponseBody
public String viewComplaintByoffice_modal(@PathVariable("refno") Long refno, Model model)
throws IllegalAccessException, InvocationTargetException {
complaintDto = complaintDAO.findByRefNo(refno);
System.out.println(complaintDto.getIncidentCategoryId() + " compiantant");
List<DBFile> dbFileTemp = complaintDAO.listOfFileByUser(refno);
complaintPdfBean = pdfService.getComplaintInfo(complaintDto);
complaintPdfBean = backOfficeService.progressOfCase(complaintPdfBean);
model.addAttribute(complaintPdfBean);
model.addAttribute("list", dbFileTemp);
return "_modals :: modal(id)";
}
暂无答案!
目前还没有任何答案,快来回答吧!