Передача данных из MongoDB в модальную загрузку с помощью EJS
Я создаю экспресс-приложение, которое включает ejs and bootstrap для рендеринга представлений, node and express для серверной части и mongodb для хранения.
У меня есть форма (contained in a modal), в которой я могу публиковать данные. После отправки формы значения сохраняются в mongodb.
Вот фрагмент для редактирования:
<td><%= cats.image %></td>
<td><a type = "button" data-toggle = "modal" data-target = "#editCategory" href = "#">Edit</a>
// without using the modal above, I'll have to create a new page to edit only one item
// I think it's a waste of page space and bad UX, so I am going with the modal
<!--<a href = "/admin/categories/edit-category/<%= cats._id %>">--> // I want to get the values from this id and show in the modal
<!--<button type = "button" class = "btn btn-primary btn-sm">Edit</button>-->
<!--</a>-->
</td>
Когда я нажимаю кнопку редактирования, я хочу получить идентификатор элемента и получить его значения для отображения в модальном окне.
Вот полный модальный вид:
<!-- Edit Category Modal -->
<div class = "modal fade" id = "editCategory" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel">
<div class = "modal-dialog" role = "document">
<div class = "modal-content">
<form action = "/admin/categories/edit-cateory/<%= %>" method = "post" enctype = "multipart/form-data">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close"> <span aria-hidden = "true">×</span> </button>
<h4 class = "modal-title" id = "myEditCategoryLabel">Edit Category</h4>
</div>
<div class = "modal-body">
<div class = "form-group">
<label>Title</label>
// this value should come from the category id but don't know how to pass it
<input value = "<%= %>" name = "title" class = "form-control" type = "text" placeholder = "Category Title"> <br>
<label>Upload Image</label>
<input class = "form-control selImg" type = "file" accept = "image/*" onchange = "showImage.call(this)">
<img src = "#" class = "imgPreview" style = "display: none; height: 100px; width: 100px">
</div>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Cancel</button>
<button type = "submit" class = "btn btn-primary">Save Edits</button>
</div>
</form>
</div>
</div>
</div>
Как передать данные из mongodb в модальное окно с помощью ejs? Любая помощь будет высоко ценится.
Ответы 1
Храните свой идентификатор где-нибудь: скрытые входы или атрибуты данных.
<tr data-id = "<%= cats.id %>">
<td><%= cats.image %></td>
<td>
<a type = "button" class = "edit" href = "#">Edit</a>
</td>
</tr>
Затем создайте обработчик событий onclick, чтобы при нажатии кнопки
он получит дополнительные данные через AJAX и открыть модальное окно динамически после того, как вы получите ответ.
$('a.edit').click(function (e) {
e.preventDefault();
var tr = $(this).closest('tr'),
modal = $('#editCategory');
// make AJAX call passing the ID
$.getJSON('/admin/categories/get-cateory/' + tr.data('id'), function (data) {
// set values in modal
modal.find('form').attr('action', '/admin/categories/get-cateory/' + tr.data('id') );
modal.find('[name=title]').val( data.title );
// open modal
modal.modal('show');
});
});
Вам нужно будет создать маршрут для получения одного объекта (я оставлю это вам)
app.get('/admin/categories/get-cateory/:id', function (req, res) {
// TODO: fetch data using passed ID
// once you have the data, simply send the JSON back
res.json(data);
});
@JosephIbe Это решение требует, чтобы у вас были все необходимые данные при построении таблицы. Если вы хотите получить дополнительные данные только после нажатия кнопки «Изменить», вам нужно будет получить данные с помощью вызова AJAX внутри обработчика onclick и дождаться ответа с дополнительными данными, прежде чем устанавливать значения модального окна и отображать модальный.
Прохладный. Как мне сделать вызовы AJAX для получения данных из mongo db?
Хорошо. Как мне вызвать этот маршрут в экспрессе, если я должен получить данные из базы данных перед их передачей?