Best way to use multiple forms in template

Using Django Templates & Frontend
1

Hello everyone,

For a web application project with Django, I have a “main” template that is a kind of patient record with multiple information about him or family members.
This information is sent in a large well-organized dictionary and generated in the view. So far nothing complicated.

My problem is that I want to propose several forms by popups to modify some info or add some.
What I’ve been doing up until now is planning a big <div id="popup"> in the template that groups all possible forms for for each individual in display:none; waiting to display them individually thanks to onclick and javascript in buttons.

template.html

<div class="container">
    ...
    <button onclick="displayPopup1Patient1();"
    ....
</div>

<div id="popup" style="display:none;">
    <div id="popup_for_data1_of_Patient1"  style="display:none;">
        {{data1_Patient1_preffiledForm.as_p}}
    </div>
    <div id="popup_Form_for_data2_of_Patient1"  style="display:none;">
        {{data2_Patient1_preffiledForm.as_p}}
    </div>
    <div id="popup_Form_for_data1_of_Patient2"  style="display:none;">
        {{data1_Patient2_preffiledForm.as_p}}
    </div>
    ....
</div>

I find this method very cumbersome because my page must load with all hidden popups which slows it down.
Moreover I have the impression that this method is not very clean and that it would be more suitable to generate each popup individually when you click on a button.
Except that the only method I know to run an action without reloading my entire page is thanks to an onclick or onchange with javascript. But you can’t pass as argument the objects needed to generate a pre-filled django form.

I guess there’s a simpler way, but I don’t know it. So if you have any idea how to solve this problem or just how to approach it differently, maybe with Django tools that I haven’t mentioned, thank you in advance.

2

How many forms are we talking about here? A small handful of forms shouldn’t create a noticeable effect - there may be a different issue to be addressed.

It may or may not - it really does depend upon your individual situation. I’ve done it both ways, depending upon specific conditions.

Sure you can. We do it regularly. Easiest way is to pass the primary keys of the object needed.

3

thank you for your reply

It depends on the case but between 70 and 90 popups which each pre-filled form is generated in the view and sent in a dictionary. Then the real “div” of each popup are distributed and generated in for loops to simplify but it still makes a dozen <div id="popup"> in the script which starts to be complicated to manage.

Well, maybe I’m not familiar with it but I can’t pass an object of the view (except in string) in a javascript function. Then display my corresponding popup with js, and return in the popup html the correct form.
I need to generate all the popup with all the forms at the beginning, then display them or not with js but I can’t create my popup dynamically with js.

4

Technically, that’s correct, because you never have the Django object in your JavaScript. All you have is the representation of the object’s attributes. What you can have is the primary key for that object - that’s what you submit back to the view as a parameter.

Yes you can, two different ways.

  • Make an AJAX call to a view to render the html fragment for that form, passing the necessary information to that view to allow the form to be properly generated.

  • Build the form within JavaScript itself. You would need to preload the page with the necessary template data to do that, but that’s going to take a lot less time than a full form render.

5

I understand. I’ll try to retrieve the primary keys in the view.
At least I know that the technique of loading everything in advance in the template is not so “off topic”.
Thanks a lot for your feedback.