Django - Отображение формы в модальном режиме
Я создаю приложение Django и пытаюсь отобразить одну из своих форм в модальном окне. Изначально оно было разработано для обычного, скрипты работали нормально, но у меня не получается правильно реализовать модальное.
Контекст классический: в окне отображается список объектов, для каждого из которых есть кнопка для редактирования, и дополнительная глобальная кнопка для создания нового объекта. Каждая кнопка должна открывать один и тот же модал.
Все могло бы стать проще, если бы у меня не было нескольких js-скриптов, посвященных форме, потому что они - моя проблема: они не работают должным образом теперь, когда форма находится в модале. Значит, я что-то сделал не так, и в конце концов я даже не уверен, что мой подход - лучший.
Модал отображается с помощью bootstrap, HTML код следующий:
<div id="grp_detail" class="modal fade hide" role="dialog" tabindex='-1'>
<div class="modal-dialog modal-lg">
<div class="modal-content form_content">
{% include './adm_group_detail.html' %}
</div>
</div>
</div>
Скажите мне, если вам нужен включенный шаблон - он довольно большой, потому что форма немного запутанная.
Представление, которое отображает страницу со списком, выглядит следующим образом:
@user_passes_test(lambda u: u.is_superuser or (u.id is not None and u.usercomp.is_admin))
def adm_groups(request, comp_slug):
'''
Manage users groups
'''
# Variables set to be integrated in locals()
company = Company.get_company(comp_slug)
group_list = UserGroup.objects.filter(company__comp_slug=comp_slug, hidden=False).order_by('group_name')
# Initialize an empty form to create a new group (to be displayed in a modal)
group_form = GroupDetail()
group_form.fields['all_users'].queryset = UserComp.objects.\
filter(company=company).\
order_by('user__last_name', 'user__first_name')
return render(request, "polls/adm_groups.html", locals())
Как вы видите, на этом этапе я создаю пустую форму, чтобы облегчить отображение, когда пользователь собирается создать новый элемент.
Во время моих первых попыток это заставило модальную форму работать идеально. К сожалению, я не понимаю, почему больше ничего не работает, возможно, это какие-то неопознанные последствия всех моих попыток найти решение ^^
Для заполнения формы для редактирования объекта данные собираются с помощью js-скрипта: Скрипт для создания формы выглядит следующим образом:
$('.update-grp').click(function(e) {
$.ajax({
method: 'GET',
url: $(this).attr('url-endpoint'),
data: {
comp_slug: $(this).attr('comp-slug'),
grp_id: $(this).attr('grp-id')
},
success: handleSuccess,
error: handleError,
});
function handleSuccess(data) {
$(".form_content").html(data.group_form);
};
function handleError(error_data) {
console.log("error");
console.log(error_data);
};
})
Вызывает следующее представление:
def get_group_detail(request):
""" Gather and send information related to groups """
comp_slug = request.GET["comp_slug"]
grp_id = int(request.GET["grp_id"]) # comes as string when 0
company = Company.get_company(comp_slug)
if grp_id > 0:
current_group = UserGroup.objects.get(id=grp_id)
group_form = GroupDetail(instance=current_group)
else:
group_form = GroupDetail()
group_form.fields['all_users'].queryset = UserComp.objects.\
filter(company=company).\
order_by('user__last_name', 'user__first_name')
context = {
"comp_slug": comp_slug,
"company": company,
"grp_id": grp_id,
"group_form": group_form,
}
template = render_to_string('polls/adm_group_detail.html', context=context, request=request)
return JsonResponse({"group_form": template})
Модал отображается правильно, но скрипты, связанные с формой, не запускаются вообще (даже console.log('Hello') ничего не отображает).
Среди моих попыток, одна из них была сгенерировать весь шаблон, а не только тот, который предназначен для формы, но результат был только хуже.
Для справки, не знаю, может ли это помочь, вот вид модала с данными:

Синие кнопки предназначены для перемещения элементов из одного списка в другой, что также возможно благодаря двойному щелчку. Но внутри модала вообще ничего не происходит.
Последнее, что я считал правильным: скрипты не применяются к обновленному html-коду. Чтобы изменить это, мне нужно прикрепить обработчик к родительскому объекту, который не будет меняться, а затем "делегировать" к фактическому объекту, который должен вызвать действие.
Так, мне нужно изменить способ срабатывания кнопок в модале end replace this, где обработчик находится на самой кнопке:
$("#add_selected").on("click", function(e) {
с этим, где обработчик включает модал, и делегирует событие кнопке:
$(".form_content").on("click", '#add_selected', function(e) {