Я пытаюсь получить информацию из строки ввода и использовать значение для модального. В настоящее время я использую Thymeleaf, и я все перепутал. Я попытался установить атрибут для href, используя jQuery. Хотя я считаю, что, поскольку th:href отображается при загрузке страницы, мой код не работает.
Конечная цель - отправить информацию из поля ввода, обработать ее в Thymeleaf и затем показать результаты вмодальный. До сих пор я могу достичь этого только тогда, когда жестко кодирую все. Я ищу более динамичный путь. Любая помощь будет оценена.
HTML:
<!DOCTYPE html>
<html xml="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="ISO-8859-1">
<title>Application</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/landing-page.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs ">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<!-- <a class="nav-link" href="create.html">Create</a> -->
<a class="nav-link" href="/addTyler">Create</a>
</li>
<li class="nav-item dropdown ml-md-auto">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Account</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider">
</div> <a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="text-center">
Taddm Mapping
</h3>
</div>
</div>
<div class="row" id="search-row">
<div class="col-md-8">
<div class="filter-search">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<div class="list-group" id="myList">
<div th:each="plants : ${plants}">
<a href="#" class="list-group-item list-group-item-action" th:text="${plants}"></a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<span class="input-group-btn">
<a class="btn btn-primary eBtn">View</a>
<!-- <a th:href="@{findOne/(appcode=01G)}" class="btn btn-primary eBtn">View</a> -->
</span>
</div>
<div class="myForm">
<form th:action="@{/save}" method="POST">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update or Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="appcode" class="col-form-label">AppCode:</label>
<input type="text" class="form-control" id="appcode" name="appcode" value=""/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="save"/>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
jQuery:
// Empty JS for your own code to be here
$(document).ready(function() {
$("#myList").toggle();
$("#myInput").on("focus", function() {
$("#myList").toggle();
});
$("#myInput").on("focusout", function() {
// Here, it'll wait 100 miliseconds to hide the list.
setTimeout(function() {
$("#myList").toggle();
}, 250);
});
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList a").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
// This is the code to populate the field after selecting an option.
$("#myList a").on("click", function() {
var texto = $(this).text();
$("#myInput").val(texto);
});
$(".eBtn").on("click", function(event){
$("a").attr("href","@{findOne/(appcode='01G')}"); //Test
event.preventDefault();
var href = $(this).attr('href');
console.log(href);
$.get(href, function(appcode,status){
$("#appcode").val(appcode);
});
$("#exampleModal").modal();
});
});
Контроллер:
@RequestMapping("/findOne")
@ResponseBody
public String findOne(String appcode) {
System.out.println(mAppRepo.findById(appcode).get().getmAppName());
return mAppRepo.findById(appcode).get().getmAppName();
}