i want to use select2.min.js to auto-plete the choices (ForeignKey values) , but it only work for my first form , i used django formset for duplicate forms

this is my snippet

<tbody class="tbody tb1 " id="form_set">
                    
                    {% for item in items.forms %}
                    <tr class="p-0 col-12">
                        
                        

                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">
                                <input class="col-12 0qarz qarz" type="number" name="" placeholder="qarz">
                                
                            </div>
                        </td>
                
                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">
                                {{item.price | add_class:'col-12 '}}
                
                            </div>
                        </td>
                
                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">    
                                {{item.quantity | add_class:'col-12 '}}
                            </div>
                        </td>
                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">
                                {{item.model | add_class:'col-12 0model model' | attr:'id:model'}}
                                
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                
<script type="text/javascript">
    $(function(){
        $('.tb1 tr:last').formset({
            prefix:'{{items.prefix}}',
            addText:'add',
            deleteText:'remove',
            addCssClass:'btn btn-success',
        });
    })
</script>

<script type="text/javascript">
        $(document).ready(function(){
            $("#model").select2()
        })
</script>

i want to use select2.min.js to auto-plete the choices (ForeignKey values) , but it only work for my first form , i used django formset for duplicate forms

this is my snippet

<tbody class="tbody tb1 " id="form_set">
                    
                    {% for item in items.forms %}
                    <tr class="p-0 col-12">
                        
                        

                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">
                                <input class="col-12 0qarz qarz" type="number" name="" placeholder="qarz">
                                
                            </div>
                        </td>
                
                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">
                                {{item.price | add_class:'col-12 '}}
                
                            </div>
                        </td>
                
                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">    
                                {{item.quantity | add_class:'col-12 '}}
                            </div>
                        </td>
                        <td class="">
                            <div class="col-12 p-0 mt-3 inp">
                                {{item.model | add_class:'col-12 0model model' | attr:'id:model'}}
                                
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                
<script type="text/javascript">
    $(function(){
        $('.tb1 tr:last').formset({
            prefix:'{{items.prefix}}',
            addText:'add',
            deleteText:'remove',
            addCssClass:'btn btn-success',
        });
    })
</script>

<script type="text/javascript">
        $(document).ready(function(){
            $("#model").select2()
        })
</script>

but the select2 only work for my first form then doesnt have any effect on other forms ! and how to set number of forms to add_class it will help to solve maybe? thanks

• javascript
• html
• django
• jquery-select2

5 Answers 5

First of all I would love to see a little bit more, for example how you actually define your formset. It is not also clear to me what are you trying to do here. Please paste more data.

I would suggest that you think about using django-select2 module that helps a lot with handling select2 stuff in django.

I am also not sure what you mean by "how to set number of forms", maybe you wish to include some incremental counter that can be done with {{ forloop }} inside for/endfor loop?

Please paste more stuff and answer will be better.

The selector you are using to initialize select2 #model is for element ids, which should be unique for each element in the DOM.

In most browsers the effect will be that only the first instance of an element id will be recognized, and the rest ignored as if they don't exist.

In this instance you want to use a class selector: .model. This will ensure select2 is initialized for all elements that have the class "model". So the code to initialize select2 would be:

<script type="text/javascript">
    $(document).ready(function(){
        $(".model").select2()
    })
</script>

You have to reinitialize(like this way: $("#model").select2();) the select2 for other pages when they appear.

You should need separately initialize with different ids.

for example:

<script type="text/javascript">
    $(document).ready(function(){
        $("#id_1").select2();
        $("#id_2").select2();
    })
</script>

the way I found is sending the number of forms through context then apply for loop in the template.

views.py

get_context_data()

 context.update({
            "accessoryNum": len(StoreRequestAccessory.objects.filter(storeRequestId=self.object.pk)),
            "oneDimensionalItemNum":len(StoreRequestOneDimensionalItem.objects.filter(storeRequestId=self.object.pk)),
            "twoDimensionalItemNum":len(StoreRequestTwoDimensionalItem.objects.filter(storeRequestId=self.object.pk)), 
        })

template.html

{% block javascripts %}
<script>
{% ment %} get accessoryNum from context {% endment %}
    var accessoryNum = {{accessoryNum}};

$(document).ready(function(){
        for(let i = 0; i <=accessoryNum; i++){
            $(`#id_storereq_accessory_form-${i}-accessoryId`).select2({
                placeholder: "Select a Item",
                allowClear: true
            });
        }
});

</script>

{% endblock javascripts %}