Render form dynamically on AJAX Request with Django

Question

Introduction

I think I'm mistaking something how (pure) AJAX and Django should be used while I try to implement the following:

1. A view is displaying a list of all model's objects with buttons to change an existing object or to create a new one.
2. Clicking on such a button opens a modal and fires an AJAX request to render the form
3. A Django view is processing the request and is rendering the template for the requested form with Django's render_to_string
4. Rendered string is returned as context with Django's JsonResponse
5. Returned JSON is used for displaying form via JavaScript (modal.innerHTML)
6. Form is filled by user and send with AJAX to a Django view where form data will be processed
7. Response is given by view with JsonResponse and shows success or errors

Since implementing step 5, I was wondering if I'm on the right track. Using render_to_string and JsonResponse leads to some extra space ahead of the form. This is caused by a BOM. To be specific, \ufeff is prepending the HTML containing string whereby the BOM is rendered (but not shown) by browser and causing the unwanted extra line.

I did not found any other solution than using replace multiple times on the HTML string to avoid the BOM (and some extra unwanted characters) and the followed-by unwanted extra line while displaying the form in the modal. This was making me wonder, if I'm going the right way.

Question

How should dynamically loaded HTML (e.g. rendered forms) be delivered by Django and (pure) AJAX to make something like I want possible?

My considerations so far

I know that AJAX is often used with Django to retrieve a set of objects or make simple requests (like deletion), where pure data as response is enough and is treated/refactored by template. I didn't found much (and here on SO mostly unanswered) about requesting a rendered HTML page with AJAX and Django.

Especially the unwanted BOM tells me, that Django's developer might not want to use it my way (otherwise there would be a nicer solution than remove it with replace I think). Am I right? Any mind-changing ideas of solving this? Do I miss anything fundamental? I really missed something fundamental. Django is using utf-8 as default, but the mentioned BOM is for utf-16 be. This could mark an error in encoding by Django but of course it's not. I recently switched from VisualStudio to PyCharm, whereby I didn't noticed, that unintentionally the files where prior saved in VS as utf-16. Removing the BOM with PyCharm of affected files did the trick. Nevertheless, I appreciate any hint on the way I try to solve this which is naturally a question of design.

In addition: I try to solve this abstractly to load any form dynamically in a modal and due to a standard form rendering template I've written, I really try to avoid putting rendering logic into every template which has to be capable of showing dynamically loaded forms (aspect of maintainability).

I'm aware of some side effects of asynchronously loaded HTML like already set JavaScript events won't work when they should effect dynamically loaded content as well and by now, there seems to be no problem solving these things. But I'm happy if anyone wants to make some considerations of more possible traps.

Answer 1

HTMX should do the the trick. Look into it