使用 django 将值传递给引导模式表单
[英] pass value to bootstrap modal form with django
本文介绍了使用 django 将值传递给引导模式表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我为表单使用引导模式时，它只显示第一个值.
这里是我的 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">删除<div class="modalfade" 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="删除">
</表单>
</td></tr>{% 结束为 %}
它会循环所有的数据，当点击delete时会弹出确认表单.但它返回相同的值.
但是如果没有 modal-bootstrap 它的工作正常.
示例: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="删除"></表单></td></tr>{% 结束为 %}
一切正常.
我应该怎么做才能让它发挥作用?...
更新
views.py
# Company Crud类 CompanyListView(ListView):context_object_name = '公司'模型 = 模型.公司类 CompanyCreateView(CreateView):字段 = ('name', 'desc')模型 = 模型.公司类公司更新视图(更新视图):字段 = ('name', 'desc')模型 = 模型.公司类 CompanyDeleteView(DeleteView):模型 = 模型.公司success_url = reverse_lazy("system:company_list")
解决方案
你的 ajax modal 将始终在 modal 内返回相同的值，因为:
- 模态有这个 data-target="#modal-default2" 作为目标，但是，你的循环包含模态体，id id="modal-default2"，它将在您的循环中尽可能多地呈现模态.
那么你可以做的就是为每个模态定义一个唯一的ID，用每个公司的ID modal-default{{company.id}}:
{% for company in companys %}'''其余代码'''<button type="button" class="btn btn-warning margin-bottom" data-toggle="modal" data-target="#modal-default{{company.id}}">删除'''其余代码'''<div class="modalfade" id="modal-default{{company.id}}"><div class="modal-dialog">
'''其余代码'''{% 结束为 %}
<块引用>
但是如果你有很多数据，这种方法是无效的，它会渲染大量的html代码.
另一种选择
使用 AJAX 和一个模态.
您的 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" >删除<!-- 注意类删除公司"-->{% 结束为 %}{% csrf_token %}<div class="modalfade" id="modal-default"><div class="modal-dialog">{% if company %} <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="删除"></表单>{％ 万一 ％}
AJAX
$(document).on('click','.delete-company',function(){var id = $(this).data('id');$.ajax({网址:'',类型:'POST'，数据:{身份证":身份证，'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),},成功:功能(数据){$('#modal-default .modal-dialog').html($('#modal-default .modal-dialog',data));$('#modal-default').modal('show');},错误:函数(){console.log('错误')},});});
而您的 views 将是:
<块引用>将您的网址从 CompanyListView.as_view() 更改为 companyListView
def companyListView(request):上下文 = {}公司 = models.Company.objects.all()如果 request.method == 'POST' 和 request.is_ajax():ID = request.POST.get('id')company = companys.get(id=ID) # 所以我们发送公司实例上下文['公司'] = 公司上下文['公司'] = 公司返回渲染(请求，'template.html'，上下文)
When I use bootstrap modal for my form its only show first value.
here my 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.
but if without modal-bootstrap its work fine.
example: 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 %}
it's work fine.
what I should do to make it work?...
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")
解决方案
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}}">
<div class="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>
<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')
},
});
});
And your views would be:
change your url from CompanyListView.as_view() to 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 将值传递给引导模式表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
