簡體   English   中英

在 Java Spring MVC bootstrap modal 中顯示提交的表單數據

[英]Display submitted form data in Java Spring MVC bootstrap modal

我正在嘗試做的事情:在提交表單時顯示的模式中顯示輸入到表單中的值。

我首先嘗試的是:簡單地引用模態中的“id”元素。 意識到這可能不起作用,因為模式是在頁面加載期間和表單具有任何值之前生成的。 所以該值將為空。

我目前正在嘗試:從我的 controller 提交后返回表單值。 表單返回后使用 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');
        }
    });

從 controller 返回

在此處輸入圖像描述

模態:

<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:納達

在此處輸入圖像描述

需要從 controller 返回一個列表。 正在返回一個字符串。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM