Pass Value To Bootstrap Modal Form With Django

When I use bootstrap modal for my form its only show first value. here my template.html {% for company in companys %} {{ company.name }}<

Solution 1:

Your ajax modal will always return the same value inside modal because: - Modal has this data-target="#modal-default2" as the target, however, your loop contains the modal body, with the id id="modal-default2", which will render modal as much as your loop goes.

So what you can do is to define a unique ID for each modal with the ID of each company modal-default{{company.id}}:

{% for company in companys %}
    ''' rest of codes '''
    <button type="button"class="btn btn-warning margin-bottom" data-toggle="modal" data-target="#modal-default{{company.id}}">
        delete
    </button>
    ''' rest of codes '''

    <div class="modal fade" id="modal-default{{company.id}}">
        <divclass="modal-dialog"></div>
    </div>
    ''' rest of codes '''
{% endfor %}

But this method is not effective if you have a lot of data, it will render lots of html codes.

Another option

With AJAX and one modal.

Your html would be:

{% for company in companys %}
    <td>{{ company.name }}</td><td>{{ company.desc }}</td><buttondata-id="{{company.id}}"type="button"class="btn btn-warning margin-bottom delete-company" >
        delete
    </button><!-- be aware of class 'delete-company' -->
{% endfor %}
{% csrf_token %}


<divclass="modal fade"id="modal-default"><divclass="modal-dialog">
        {% if company %} <!-- this company instance will come from AJAX --><formmethod="post"action="{% url 'system:company_delete' pk=company.pk %}">
            {% csrf_token %}

            <divclass="modal-content"><divclass="modal-body"><inputtype="text"name="name"maxlength="100"required=""id="id_name"value="{{ company.pk }}"><inputtype="submit"class="btn btn-primary"value="Delete"></div></div></form>
        {% endif %}
    </div></div>

AJAX

$(document).on('click','.delete-company',function(){
    var id = $(this).data('id');

    $.ajax({
        url:'',
        type:'POST',
        data:{
            'id':id,
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
        },
        success:function(data){
            $('#modal-default .modal-dialog').html($('#modal-default .modal-dialog',data));
            $('#modal-default').modal('show');
        },
        error:function(){
            console.log('error')
        },
    });
});

And your views would be:

change your url from CompanyListView.as_view() to companyListView

defcompanyListView(request):
    context = {}
    companys = models.Company.objects.all()
    if request.method == 'POST'and request.is_ajax():
        ID = request.POST.get('id')
        company = companys.get(id=ID) # So we send the company instance
        context['company'] = company
    context['companys'] = companys
    return render(request,'template.html',context)