I'm currently working on a Django application and I am facing a challenge with displaying one of my forms in a modal window. Originally, the form was designed to work fine in a regular window, but when trying to implement it in a modal, I encountered some difficulties.
The scenario is typical: a window shows a list of objects with an edit button for each item, along with a global "create new object" button. These buttons should all open the same modal.
My main issue stems from having multiple js scripts specifically tailored for the form. They are not functioning properly now that the form is within a modal. It seems like I made a mistake somewhere, and I am starting to doubt if my approach is the most efficient.
One question that arises during my troubleshooting is whether js scripts do not apply to HTML elements that are updated dynamically. If this is true, is there a way to 'reload' or refresh the script so it recognizes the changes in scope?
The modal itself is implemented using Bootstrap and the HTML code looks like this:
<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>
Let me know if you require the included template - it's quite lengthy due to the complexity of the form.
The view responsible for rendering the page with the object list is shown below:
@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
'''
# Local variables initialization
company = Company.get_company(comp_slug)
group_list = UserGroup.objects.filter(company__comp_slug=comp_slug, hidden=False).order_by('group_name')
# Create an empty form for adding 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())
As seen in the code snippet above, I prepare an empty form at this stage to simplify the display when a user wants to add a new item.
In this particular situation, the modal functions correctly. However, I encounter issues when attempting to utilize a script to update the form after editing another item.
To pre-fill the form for editing an object, data is fetched via a javascript function: The script used to create the form is as follows:
$('.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);
};
})
This script calls the following view function:
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})
While the modal displays correctly, the scripts associated with the form fail to execute (even a simple console.log('Hello') does not show anything).
Despite numerous attempts, including generating the entire template instead of just the form section, I have not been able to resolve the issue satisfactorily.
For additional context, here is a preview of the modal with its associated data: https://i.sstatic.net/B6b05.png
The blue buttons are intended to facilitate moving elements between lists, which can also be achieved through double-clicking. However, no actions seem to be triggered within the modal.