使用django将值传递给bootstrap模式窗体 [英] pass value to bootstrap modal form with django

问题描述

当我为我的表单使用bootstrap模式时，它只显示第一个值。

When I use bootstrap modal for my form its only show first value.

这里我的 template.html

{% for company in companys %}
<tr>
    <td>{{ company.name }}</td>
    <td>{{ company.desc }}</td>
    <td align="center">
        <button type="button" class="btn btn-warning margin-bottom" data-toggle="modal" data-target="#modal-default2">
            delete
        </button>

        <div class="modal fade" id="modal-default2">
            <div class="modal-dialog">

                <form method="post" action="{% url 'system:company_delete' pk=company.pk %}">
                {% csrf_token %}

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

                </form>
            </div>
        </div>
    </td>
</tr>

{% endfor %}

循环所有数据，点击时删除将弹出确认表单。但它的返回值相同。

its loop all the data, when click delete confirm form will popup. but its return same value.

但如果没有modal-bootstrap，它的工作正常。

but if without modal-bootstrap its work fine.

示例： template.html

{% for company in companys %}
<tr>
    <td>{{ company.name }}</td>
    <td>{{ company.desc }}</td>
    <td align="center">
        <form method="post" action="{% url 'system:company_delete' pk=company.pk %}">
            {% csrf_token %}
            <input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ company.pk }}">
            <input type="submit" class="btn btn-primary" value="Delete">
        </form>
    </td>
</tr>

{% endfor %}

工作正常。

我应该怎样做才能让它发挥作用？...

what I should do to make it work?...

update

update

views.py

# Company Crud
class CompanyListView(ListView):
    context_object_name = 'companys'
    model = models.Company

class CompanyCreateView(CreateView):
    fields = ('name', 'desc')
    model = models.Company

class CompanyUpdateView(UpdateView):
    fields = ('name', 'desc')
    model = models.Company

class CompanyDeleteView(DeleteView):
    model = models.Company
    success_url = reverse_lazy("system:company_list")

推荐答案

您的ajax模式将始终返回相同的值内部模态因为：

- Modal将此 data-target =＃modal-default2作为目标，但是，你的循环包含模态体，id id =modal-default2，它会像你的循环一样呈现模态。

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.

所以你可以做的是为每个模态定义一个唯一的ID，每个公司的ID modal-default {{company.id}} ：

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}}">
        <div class="modal-dialog">
        </div>
    </div>
    ''' rest of codes '''
{% endfor %}

但如果您有大量数据，此方法无效，它将呈现大量的HTML代码。

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

另一个选项

使用AJAX和一个模态。

Another option

With AJAX and one modal.

你的html会是：

{% for company in companys %}
    <td>{{ company.name }}</td>
    <td>{{ company.desc }}</td>

    <button data-id="{{company.id}}" type="button" class="btn btn-warning margin-bottom delete-company" >
        delete
    </button> <!-- be aware of class 'delete-company' -->
{% endfor %}
{% csrf_token %}


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

            <div class="modal-content">    
                <div class="modal-body">
                    <input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ company.pk }}">
                    <input type="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')
        },
    });
});

您的观点将是：

将您的网址从 CompanyListView.as_view（）更改为 companyListView

def companyListView(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)

这篇关于使用django将值传递给bootstrap模式窗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！