Динамические модальные данные с Twig
Я отображаю список пользователей, использующих Twig:
{% for user in user.users %}
<div class = "row user" data-id = "{{ user.id }}">
<div class = "col">{{ user.firstname }} {{ user.lastname }}</div>
<div class = "col">{{ user.email }}</div>
<div class = "col">{{ user.lastLogin|date("F j, Y \\a\\t g:i a") }}</div>
</div>
{% endfor %}
Когда пользователь нажимает на эту строку, я хотел бы, чтобы модальное диалоговое окно открывалось с дополнительными сведениями об этом конкретном пользователе.
Я подумал о том, чтобы просто включить модальное окно в цикл for. Однако, если список содержит несколько сотен пользователей, я не хочу отображать все эти дополнительные данные при каждой загрузке страницы.
Моя мысль состояла в том, чтобы сделать что-то вроде этого:
$('body').on('click', '.user', function() {
$('#user').modal();
});
Но я не уверен, как динамически отображать только щелкнутые данные пользователя в модальном режиме через ветку:
<div class = "modal fade" id = "user" tabindex = "-1" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
{{ user.firstname }} //additonal data for a given user
</div>
</div>
</div>
Ответы 3
- Просто: вы можете установить данные в .row, такие как data-id (data-firstname, data-lastname и т. д.) И замените текст внутри всплывающего окна, например:
$('body').on('click', '.user', function() {
$('#user .modal-content').html($(this).data('firstname'));
$('#user').modal();
});
- Лучше: сделать ajax-запрос к серверу по идентификатору пользователя и показать ответ во всплывающем окне.
Как сказал Макс, есть два способа добиться этого. Я бы предпочел первый подход, потому что вам не нужно добавлять все атрибуты данных, вы можете подключить шаблоны ветки к бэкэнд-функции, как указано здесь https://symfony.com/doc/current/frontend/encore/server-data.html =>
Следуя общим указаниям двух других авторов, я в конечном итоге разработал решение, используя запрос AJAX. Общий план ниже:
Контроллер:
if ($request->isXMLHttpRequest()) {
$user = $this->entityManager->getRepository(User::class)->find($request->get('user_id'));
return $this->render(
'ui/user-details-modal.html.twig',
['user' => $user]
);
}
Javascript:
$('body').on('click', '.user', function() {
let id = $(this).data('id');
return $.ajax({
type: 'POST',
url: url,
data: {user_id: id},
dataType: 'html',
success: function(response) {
$('#user-details').html(response);
$('#user').modal();
}
});
});
Надеюсь, это будет полезно для тех, кто хочет сделать что-то подобное.
Спасибо - после рассмотрения вашего ответа я думаю, что запрос ajax - единственный жизнеспособный вариант, поскольку я хочу загрузить около 20 полей, которые не включены в исходный набор данных. Я попробую это сейчас!