Здравствуйте, есть приложение, на главной странице выводит пользователей из БД, есть кнопка создать, редактировать и удалить. Необходимо было переделать его с использованием bootstrap чтобы при нажатии на кнопку "Редактировать" появлялось модальное окно с уже заполненными полями пользователя которого редактируем. Без bootstrap проблем у меня не возникло, я отправлял запрос с id в контроллер, контроллер возвращал мне модель нужного пользователя в отдельный view. А как взаимодействовать с модальным окном - просто не пойму, как передать в модальное окно модель ?
1 ответ
Spring MVC - это бэкенд-фреймворк. Bootstrap - это фронтенд-фреймворк. Друг о друге они ничего не знают и взаимодействовать не могут. Взаимодействовать с модальным окном Bootstrap нужно с помощью JavaScript.
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit user</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label" for="firstNameInput">First name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="firstNameInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="lastNameInput">Last name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lastNameInput" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="emailInput">E-mail</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailInput" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-10">
<button type="submit" class="btn btn-default">Save</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<c:forEach var="user" items="users">
<tr id="user-${user.id}">
<td>${user.firstName}</td>
<td>${user.lastName}</td>
<td>${user.email}</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-user-id="${user.id}">Edit</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
$("#myModal").on('show.bs.modal', function(e) {
var userId = $(e.relatedTarget).data('user-id');
var cols = $('#user-' + userId + ' td');
var firstName = $(cols[0]).text();
var lastName = $(cols[1]).text();
var email = $(cols[2]).text();
$('#firstNameInput').val(firstName);
$('#lastNameInput').val(lastName);
$('#emailInput').val(email);
});
$("#myModal").on('hidden.bs.modal', function() {
var form = $(this).find('form');
form[0].reset();
});
-
Спасибо большое, я именно этого и не понимал что "Друг о друге они ничего не знают и взаимодействовать не могут", за код отдельное спасибо. – Роман 17 апр '17 в 10:44