java—如何通过conrtoller的ajax和thymleaf以模态方式查看动态数据

ct3nt3jp  于 2021-07-22  发布在  Java
关注(0)|答案(0)|浏览(141)

我想显示一个特定的用户信息的帮助下,引导模式点击'查看'按钮。单击后,模态不会打开,数据也不会填充在模态中。
这是我的模式代码:

<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">&times;</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)";
    }

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题