Cloning an autocomplete form dynamically

[YasirKusay]

Hello,

I am sorry for opening up an issue for this but I did not know where else to ask this.

Lets say I have this form:

class PostForm:
    tag = forms.ModelChoiceField(queryset=Tags.objects.all(), 
                                                  required=True, 
                                                  widget=autocomplete.ModelSelect2(url='tag_autocomplete', 'attrs': {'id: 'tag_1'}}))

In otherwords, it contains an autocomplete field that calls tag_autocomplete to fetch a possible list of results from the search. (In the actual form, there are more fields but I am trying to keep the code as simple as possible)

I also have a view that takes the above form and renders it in a html file like this:

<form>
    {{ post_form.tag }}
    <input type="submit">
<form>

How can I create a duplicate of the autocomplete field, for example, by clicking an “Add Additional Tag” button. Normally, you can just get a duplicate of an input element by cloning it and changing the new one’s ID/name before appending it to the html. However, this is not possible here as DAL does some additional rendering which adds additonal tags below the form element (I tried to understand how it works from the documentation, specifically the tutorial but I couldn’t).

[jpic]

Does it work with ModelMultipleChoiceField and a SelectMultiple widget instead? Le mer. 31 janv. 2024, 12:52, YasirKusay ***@***.***> a écrit :

…

Hello, I am sorry for opening up an issue for this but I did not know where else to ask this. Lets say I have this form: class PostForm: tag = forms.ModelChoiceField(queryset=Tags.objects.all(), required=True, widget=autocomplete.ModelSelect2(url='tag_autocomplete', 'attrs': {'id: 'tag_1'}})) In otherwords, it contains an autocomplete field that calls tag_autocomplete to fetch a possible list of results from the search. (In the actual form, there are more fields but I am trying to keep the code as simple as possible) I also have a view that takes the above form and renders it in a html file like this: <form> {{ post_form.tag }} <input type="submit"> <form> How can I create a duplicate of the autocomplete field, for example, by clicking an “Add Additional Tag” button. Normally, you can just get a duplicate of an input element by cloning it and changing the new one’s ID/name before appending it to the html. However, this is not possible here as DAL does some additional rendering which adds additonal tags below the form element (I tried to understand how it works from the documentation, specifically the tutorial but I couldn’t). — Reply to this email directly, view it on GitHub <#1352>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAXDLFJ5MU46Z32B6X3G43YRIWAPAVCNFSM6AAAAABCS5JEESVHI2DSMVQWIX3LMV43ASLTON2WKOZSGEYDSOJSGY4DINY> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[YasirKusay]

I prefer to keep separate autocomplete forms, rather than using a single autocomplete form. Is there another way?

[jpic]

You mean like admin inline forms? Le jeu. 1 févr. 2024, 01:02, YasirKusay ***@***.***> a écrit :

…

I prefer to keep separate autocomplete forms, rather than using a single autocomplete form. Is there another way? — Reply to this email directly, view it on GitHub <#1352 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAXDLDLEH3L5WHDYYRP6SLYRLLRHAVCNFSM6AAAAABCS5JEESVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRQGIYTMNZRGY> . You are receiving this because you commented.Message ID: ***@***.***>

[YasirKusay]

Sorry, I meant that I would like separate autocomplete fields.

[jpic]

Cloning the element should be supported, dal contains code to add a mutation observer and initialize new fields Le jeu. 1 févr. 2024, 09:58, YasirKusay ***@***.***> a écrit :

…

Sorry, I meant that I would like separate autocomplete fields. — Reply to this email directly, view it on GitHub <#1352 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAXDLEACJGIOGUS6CUGLFLYRNKMJAVCNFSM6AAAAABCS5JEESVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRQHAYTSMZUGE> . You are receiving this because you commented.Message ID: ***@***.***>

[YasirKusay]

I tried that before creating this issue, but there were a few problems with this. I made a simple recreation of what I was originally trying to achieve:

I have an all_autocomplete_forms div that stores wrapperDiv divs that actually contains the autocomplete form. When you click the add_more button, it will duplicate an the individual element (via cloneNode), change attributes such as the name and id and insert it into a new wrapperDiv which in turn gets inserted back into all_autocomplete_forms. Please look at the output attached here:

In the above error, I am highlighting the div containing the first autocomplete element (which is missing the span element).

In the second image, I am highlighting the div the div containing the second autocomplete element. This, along with any subsequent elements appears fine.

I also did a method where I cloned the entire wrapperDiv element itself and changed attributes inside it before inserting it back into all_autocomplete_forms. The results of this are identical.

[YasirKusay]

Could you let me know if I can do anything differently?

[YasirKusay]

Hi I just want to check in again. Could you let me know if I did anything wrong and if I can do anything differently?