0
モーダルフォームをインコークしようとしているときに問題が発生しました。編集ボタンをクリックすると、フォームをロードする必要がありますが、問題を探した後は何も表示されません。それは、問題はまだ、私は今日はすべてのソリューションが、何をしようとするために、ここでstuckedよ、残る....モーダルインテグレーション中のブートストラップの問題
コードスニペットは、コード全体表示されます。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{title}">Spring 4 MVC</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css"
href="../static/css/bootstrap.min.css"
th:href="@{css/bootstrap.min.css}"
/>
<link rel="stylesheet" type="text/css"
href="../static/css/dataTables.bootstrap4.min.css"
th:href="@{css/dataTables.bootstrap4.min.css}"
/>
<link rel="stylesheet" type="text/css"
href="../static/css/buttons.bootstrap4.min.css"
th:href="@{css/buttons.bootstrap4.min.css}"
/>
<script type="text/javascript"
src="../static/js/jquery-3.2.1.min.js"
th:src="@{js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript"
src="../static/js/jquery.dataTables.min.js"
th:src="@{js/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
src="../static/js/dataTables.buttons.min.js"
th:src="@{js/dataTables.buttons.min.js}"></script>
<script type="text/javascript"
src="../static/js/pdfmake.min.js"
th:src="@{js/pdfmake.min.js}"></script>
<script type="text/javascript"
src="../static/js/dataTables.bootstrap4.min.js"
th:src="@{js/dataTables.bootstrap4.min.js}"></script>
<script type="text/javascript"
src="../static/js/buttons.bootstrap4.min.js"
th:src="@{js/buttons.bootstrap4.min.js}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
});
table.buttons().container()
.appendTo('#example_wrapper .col-md-6:eq(0)');
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#mytable #checkall").click(function() {
if ($("#mytable #checkall").is(':checked')) {
$("#mytable input[type=checkbox]").each(function() {
$(this).prop("checked", true);
});
} else {
$("#mytable input[type=checkbox]").each(function() {
$(this).prop("checked", false);
});
}
});
$("[data-toggle=tooltip]").tooltip();
});
</script>
</head>
<body>
<div class="container">
<div th:if="${not #lists.isEmpty(produit)}">
<h2>Product List</h2>
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Product Id</th>
<th>Description</th>
<th>Price</th>
<th>View</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${produit}">
<td th:text="${product.idProduit}">Id</td>
<td th:text="${product.code}">code</td>
<td th:text="${product.libelle}">descirption</td>
<td th:text="${product.indice}">price</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button data-title="Edit" data-toggle="modal" data-target="#edit">Edit</button></p>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder="Mohsin"/>
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Irshad"/>
</div>
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</body>
</html>
''ファイルが含まれていないようです。 '/ jquery-3.2.1.min.js'の後にそのファイルをインクルードします。 – Subash
ありがとうございました@Subash –
大歓迎です！ – Subash