在 Java Spring MVC bootstrap modal 中显示提交的表单数据

Question

What I am trying to do: Display a value entered into a form in the modal that is shown by submitting the form.我正在尝试做的事情：在提交表单时显示的模式中显示输入到表单中的值。

What I tried first: To simply reference the "id" element in the modal.我首先尝试的是：简单地引用模态中的“id”元素。 Realized this probably would not work because the modal is generated during page load and before the form has any values.意识到这可能不起作用，因为模式是在页面加载期间和表单具有任何值之前生成的。 So the value will be empty.所以该值将为空。

What I am currently trying: To return the form value after submission from my controller.我目前正在尝试：从我的 controller 提交后返回表单值。 Use boostrap Table('load', data) to load the table after form return and display in the modal.表单返回后使用 boostrap Table('load', data) 加载表格并在模态中显示。

I am very new to Java and feel like I may be making this a lot more complicated than it needs to be.我对 Java 很陌生，我觉得我可能会让这比需要的复杂得多。 Here is the current code:这是当前代码：

If any additional code snippets needed, let me know...如果需要任何其他代码片段，请告诉我...

javascript - I know I am making it into submit.done because the table is displaying, just no data. javascript - 我知道我将其放入 submit.done 因为表格正在显示，只是没有数据。

$table = $("#notesTable").bootstrapTable({
    data: []
});
$("#notesTable").hide(); 
$("#btnSubmit").click(function() {
    var dataString = $("#extractForm").serialize();
    var submit = $.ajax({
        url: "${pageContext.request.contextPath}/doc/validateAuditId",
        type: "POST",
        cache: false,
        data: dataString
    });
    submit.done(function(data) {
        if (data.length && data.length > 0) {
            $("#notesTable").show();
            $("#notesTable").bootstrapTable('load', data);
            $("#dlgUpload").modal('show');
            
        }else{
            $("#notesTable").hide();
            $("#dlgUpload").modal('show');
        }
    });

Return from controller从 controller 返回

Modal:模态：

<html>
<body>
<div id="dlgUpload" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="noteTitle">Upload File</h4>
            </div>
            <div class="modal-body">
                    <div class="tabs-div">
                    <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#tabUploadDoc" aria-controls="tabUploadDoc" role="tab" data-toggle="tab">Upload Document</a></li>
                    <li role="presentation"><a href="#tabDocType" aria-controls="tabDocType" role="tab" data-toggle="tab">Select Doc Type</a></li>
                    <li role="presentation"><a href="#tabPerceptiveContent" aria-controls="tabPerceptiveContent" role="tab" data-toggle="tab">Perceptive Content</a></li>
                    </ul>
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade in active" id="tabUploadDoc">
                            <br>
                            <form:form method="POST" action="${pageContext.request.contextPath}/doc/uploadFile" enctype="multipart/form-data">  
                            <div class="row">
                                <div class="col-xs-3 form-group">
                                    <form:label path="fileName">Select a file to upload:</form:label>
                                </div>
                                <div class="col-xs-2 form-group">
                                    <input type="file" name="fileName" />
                                </div>
                            </div>
                    <table id="notesTable" data-classes="table table-striped table-no-bordered" data-undefined-text="" data-toggle="table">
                    <thead>
                        <tr>
                            <th data-field="retAuditId" data-visible="true" data-align="left" data-sortable="false">Audit ID</th>
                        </tr>
                    </th>

Output: Nada Output：纳达

Answer 1

Need to return a list from the controller.需要从 controller 返回一个列表。 Was returning a String.正在返回一个字符串。

在 Java Spring MVC bootstrap modal 中显示提交的表单数据

问题描述

1 个解决方案

解决方案1
0 2020-07-22 14:41:39

在 Java Spring MVC bootstrap modal 中显示提交的表单数据

问题描述

1 个解决方案

解决方案1 0 2020-07-22 14:41:39

解决方案1
0 2020-07-22 14:41:39