使用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屋!