首页 > 解决方案 > 在 Java Spring MVC 引导模式中显示提交的表单数据

问题描述

我正在尝试做的事情:在提交表单时显示的模式中显示输入到表单中的值。

我首先尝试的是:简单地引用模态中的“id”元素。意识到这可能不起作用,因为模式是在页面加载期间和表单具有任何值之前生成的。所以该值将为空。

我目前正在尝试:从我的控制器提交后返回表单值。表单返回后使用 boostrap Table('load', data) 加载表格并在模态中显示。

我对 Java 很陌生,感觉我可能会让这变得比它需要的复杂得多。这是当前代码:

如果需要任何其他代码片段,请告诉我...

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');
        }
    });

从控制器返回

在此处输入图像描述

模态:

<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>

输出:纳达

在此处输入图像描述

标签: javascriptjavaspringspring-mvcbootstrap-modal

解决方案


需要从控制器返回一个列表。正在返回一个字符串。


推荐阅读