【发布时间】：2017-09-17 10:53:41
【问题描述】：
我是 spring-boot 的新手，我正在根据文档和我找到的一些教程构建这个工具用于学习目的。因此，我使用从包 org.springframework.data.repository 扩展的 CRUD 存储库构建了一些代码。我已经来到使用这个 RESTservice Impl 更新记录的部分
public boolean modifyVacancy(Vacancy vacancy){
boolean passedProcessFlow = false;
if(vacancyRepository.exists(vacancy.getIdVacancy())){
vacancyRepository.save(vacancy);
passedProcessFlow = true;
}
return passedProcessFlow;
}
这里是从控制器调用的：
@RequestMapping(value="/vacancies/edit/{id}", method = RequestMethod.POST)
public String editVacancy(@PathVariable Integer id, Model model,
@ModelAttribute("vacancyEdit") Vacancy vacancy){
System.out.println("<<<<<<<<<<<<<<<<<<<<<IT PASSED THROUGH HERE>>>>>>>>>>>>>>>>>>>>>>>>>");
//modelAndView.setViewName("vacancies");
vacancyService.modifyVacancy(vacancy);
return "redirect:vacancies";
}
最后但并非最不重要的是我的 thymeleaf html：
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js"></script>
<link th:href="@{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<link th:href="@{static/css/login.css}"
rel="stylesheet" media="screen" />
<script src="../static/js/login.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<link href="../static/css/guru.css"
th:href="@{css/guru.css}" rel="stylesheet" media="screen"/>
<link href="../static/css/guru.css"
th:href="@{css/guru.css}" rel="stylesheet" media="screen"/>
<script>
$(document).ready(function () {
var btnOpen = $('#btnOpen'),
btnOpenEdit = $('#btnOpenEdit'),
btnOnInterviewEdit = $('#btnOnInterviewEdit'),
btnOnInterview = $('#btnOnInterview'),
btnCloseEdit = $('#btnClosedEdit')
btnClose = $('#btnClosed')
$("#vacancyStatus").val("1");
$("#btnOpen").click(function () {
$("#vacancyStatus").val("1");
$(this).toggleClass('btn-default btn-info')
btnOnInterview.removeClass('btn-warning').addClass('btn-default')
btnClose.removeClass('btn-danger').addClass('btn-default')
});
$("#btnOpenEdit").click(function () {
$("#vacancyStatusEdit").val("1");
$(this).toggleClass('btn-default btn-info')
btnOnInterviewEdit.removeClass('btn-warning').addClass('btn-default')
btnCloseEdit.removeClass('btn-danger').addClass('btn-default')
});
$("#btnOnInterview").click(function () {
$("#vacancyStatus").val("2");
$(this).toggleClass('btn-default btn-warning')
btnOpen.removeClass('btn-info').addClass('btn-default')
btnClose.removeClass('btn-danger').addClass('btn-default')
});
$("#btnOnInterviewEdit").click(function () {
$("#vacancyStatusEdit").val("2");
$(this).toggleClass('btn-default btn-warning')
btnOpenEdit.removeClass('btn-info').addClass('btn-default')
btnCloseEdit.removeClass('btn-danger').addClass('btn-default')
});
$("#btnClosed").click(function () {
$("#vacancyStatus").val("3");
$(this).toggleClass('btn-default btn-danger')
btnOnInterview.removeClass('btn-warning').addClass('btn-default')
btnOpen.removeClass('btn-info').addClass('btn-default')
});
$("#btnClosedEdit").click(function () {
$("#vacancyStatusEdit").val("3");
$(this).toggleClass('btn-default btn-danger')
btnOnInterviewEdit.removeClass('btn-warning').addClass('btn-default')
btnOpenEdit.removeClass('btn-info').addClass('btn-default')
});
$('#search-form').submit(function(){
var formAction = $("#selectsearch").val() == "people" ? "user" : "content";
$("#search-form").attr("action", "/search/" + formAction);
});
$('.editButton').on('click', function() {
// Get the record's ID via attribute
var id = $(this).attr('data-id');
$.ajax({
url: 'http://localhost:8080/api/vacancies/'+ id,
method: 'GET'
}).success(function(response) {
// Populate the form fields with the data returned from server
$('#vacancyEditForm')
.find('[id="idVacancyEdit"]').val(id).end()
.find('[id="positionTitleEdit"]').val(response.jobPositionTitle).end()
.find('[id="skillsDescriptionEdit"]').val(response.jobPositionSkillDescription).end()
.find('[id="vacancySlotsEdit"]').val(response.vacancySlots).end()
.find('[id="vacancyStatusEdit"]').val(response.vacancyState).end()
.prop("action", "/vacancies/edit/"+id)
// Show the dialog
bootbox
.dialog({
title: 'Edit Vacancy',
message: $('#vacancyEditForm'),
show: false // We will show it manually later
})
.on('shown.bs.modal', function() {
$('#vacancyEditForm')
.show() // Show the login form
//.formValidation('resetForm'); // Reset form
})
.on('hide.bs.modal', function(e) {
// Bootbox will remove the modal (including the body which contains the login form)
// after hiding the modal
// Therefor, we need to backup the form
$('#vacancyEditForm').trigger("reset");
$('#vacancyEditForm').hide().appendTo('body');
//$('#vacancyEditForm').hide();
})
.modal('show');
});
});
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vacancies List</title>
</head>
<body>
<div class="container">
<div >
<h2>Vacancy List</h2>
<br></br>
<br></br>
<div class="col col-xs-6 text-left">
<a data-toggle="modal" data-target="#modalVacancyInput" class="btn icon-btn btn-success" href="#"><span class="glyphicon btn-glyphicon glyphicon-plus img-circle text-success"></span>Add New Vacancy</a>
</div>
<br></br>
<br></br>
<br></br>
<br></br>
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Title</th>
<th>Skills Description</th>
<th>View</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr th:each="vacancyO : ${vacancies}">
<td th:text="${vacancyO.idVacancy}">Vacancy Id</td>
<td th:text="${vacancyO.jobPositionTitle}">Job Title</td>
<td th:text="${vacancyO.jobPositionSkillDescription}">price</td>
<td><a class="btn btn-success" th:href="@{'/vacancy/id='+${vacancyO.idVacancy}}"><span class="glyphicon glyphicon-eye-open">View</span></a></td>
<!--td><a class="btn btn-warning" th:attr="data-id=${vacancyO.idVacancy}" name="editButton" th:href="@{'/vacancy/edit/id='+${vacancyO.idVacancy}}"><span class="glyphicon glyphicon-edit">Edit</span></a></td-->
<td><button class="btn btn-warning editButton" th:attr="data-id=${vacancyO.idVacancy}" ><span class="glyphicon glyphicon-edit">Edit</span></button></td>
<td><a class="btn btn-danger" th:href="@{'/vacancy/delete/id='+${vacancyO.idVacancy}}"><span class="glyphicon glyphicon-trash">Delete</span></a></td>
</tr>
</table>
</div>
</div>
<div id="modalVacancyInput" class= "modal fade in" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Vacancy</h1>
</div>
<div class="modal-body">
<form th:action="@{/vacancies}" id="vacancyForm" role="form" method="post" th:object="${vacancy}" class="form-horizontal">
<fieldset>
<!-- Text input-->
<!--div class="form-group">
<label class="col-md-4 control-label" for="idVacancy">Id Vacancy</label>
<div class="col-md-4">
<input id="idVacancy" name="idVacancy" type="text" placeholder="Id. Vacancy" class="form-control input-md"/>
<span class="help-block">help</span>
</div>
</div-->
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="positionTitle">Position Title</label>
<div class="col-md-4">
<input id="positionTitle" th:field="*{jobPositionTitle}" name="positionTitle" type="text" placeholder="Position title" class="form-control input-md" required=""/>
<span class="help-block">help</span>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="skillsDescription">Skills Description</label>
<div class="col-md-4">
<textarea class="form-control" id="skillsDescription" th:field="*{jobPositionSkillDescription}" name="skillsDescription">Detail the required skills</textarea>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="vacancySlots">Positions to open</label>
<div class="col-md-4">
<input id="vacancySlots" th:field="*{vacancySlots}" name="vacancySlots" type="number" placeholder="1" class="form-control input-md" required=""/>
<span class="help-block">help</span>
</div>
</div>
<input value="1" type="hidden" id="vacancyStatus" th:field="*{vacancyState}"/>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Status</label>
<div class="btn-group-lg" align="left">
<button type="button" id="btnOpen" value="Opened" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-ok" ></i></button>
<button type="button" id="btnOnInterview" value="OnInterview" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-warning-sign"></i></button>
<button type="button" id="btnClosed" value="Closed" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary">
Save changes
</button>
</div>
</fieldset>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="modalVacancyEdit" class= "modal fade in" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Vacancy</h1>
</div>
<div class="modal-body">
<form id="vacancyEditForm" role="form" th:method="POST" th:object="${vacancyEdit}" class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="idVacancyEdit">Id Vacancy</label>
<div class="col-md-4">
<input id="idVacancyEdit" th:field="*{idVacancy}" name="idVacancy" type="text" placeholder="Id. Vacancy" class="form-control input-md" disabled="true"/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="positionTitleEdit">Position Title</label>
<div class="col-md-4">
<input id="positionTitleEdit" th:field="*{jobPositionTitle}" name="positionTitle" type="text" placeholder="Position title" class="form-control input-md" required=""/>
<span class="help-block">help</span>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="skillsDescriptionEdit">Skills Description</label>
<div class="col-md-4">
<textarea class="form-control" id="skillsDescriptionEdit" th:field="*{jobPositionSkillDescription}" name="skillsDescription">Detail the required skills</textarea>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="vacancySlotsEdit">Positions to open</label>
<div class="col-md-4">
<input id="vacancySlotsEdit" th:field="*{vacancySlots}" name="vacancySlots" type="number" placeholder="1" class="form-control input-md" required=""/>
<span class="help-block">help</span>
</div>
</div>
<input value="1" type="hidden" id="vacancyStatusEdit" th:field="*{vacancyState}"/>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Status</label>
<div class="btn-group-lg" align="left">
<button type="button" id="btnOpenEdit" value="Opened" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-ok" ></i></button>
<button type="button" id="btnOnInterviewEdit" value="OnInterview" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-warning-sign"></i></button>
<button type="button" id="btnClosedEdit" value="Closed" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary">
Save changes
</button>
</div>
</fieldset>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
我让它很好地运行创建，但是当我谈到使用按钮编辑（用于编辑记录）的部分时，它显示了一个引导模式，该模式包装了表单“vacancyEditForm”，以及在前面的示例将 form.action 更改为应该由我的控制器在 editVacancy 方法中捕获的某个路径......但不是！可能是我想念的愚蠢的东西，但我现在一无所知....有什么想法吗？
【问题讨论】：
-
modalVacancyEdit 表单没有适合您的操作。
-
我使用带有 .prop("action", "/vacancies/edit/"+id) 的 jquery 在 javascript 中添加了它。此外，当我在 Chrome 中运行 DOM 检查器时，表单已经设置了正确的操作。
标签： jquery ajax spring-boot thymeleaf crud