Hou*_*man 34 forms django modal-dialog twitter-bootstrap
有人在四月份提出完全相同的问题,没有任何答案.但由于他提供的信息太少; 这个问题被抛弃了.
我也有同样的问题.在一个main_page.html我有这样一行:
<a href="/contact/edit/{{ item.id }}" title="Edit">edit</a>
一旦你点击那里,编辑模板将出现在twitter bootstrap模式中.
url.py
(r'^contact/edit/(?P<contact_id>\d+)/$', contact_view),
view.py
def contact_view(request, contact_id=None):
profile = request.user.get_profile()
if contact_id is None:
contact = Contact(company=profile.company)
template_title = _(u'Add Contact')
else:
contact = get_object_or_404(profile.company.contact_set.all(), pk=contact_id)
template_title = _(u'Edit Contact')
if request.POST:
if request.POST.get('cancel', None):
return HttpResponseRedirect('/')
form = ContactsForm(profile.company, request.POST, instance=contact)
if form.is_valid():
contact = form.save()
return HttpResponseRedirect('/')
else:
form = ContactsForm(instance=contact, company=profile.company)
variables = RequestContext(request, {'form':form, 'template_title': template_title})
return render_to_response("contact.html", variables)
这通常是contact.html的样子:
<form class="well" method="post" action=".">
{% csrf_token %}
{{form.as_p}}
<input class="btn btn-primary" type="submit" value="Save" />
<input name="cancel" class="btn" type="submit" value="Cancel"/>
</form>
我可以把它放在里面<div class="modal-body">.但是,我如何从视图中打开模态？
Jos*_*ton 44
除非你需要在模态之外使用联系表格,否则这应该适合你.如果您确实需要在其他地方使用它,请保留两个版本(一个模态,一个不是).另外,一个提示 - 给django-crispy-forms一个lookover - 它可以帮助你使用twitter-bootstrap类渲染表单.
contact.html:
<div class="modal hide" id="contactModal">
<form class="well" method="post" action="/contact/edit/{{ item.id }}">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Editing Contact</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{form.as_p}}
</div>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" value="Save" />
<input name="cancel" class="btn" type="submit" value="Cancel"/>
</div>
</form>
</div>
main_page.html
<html>
...
<a data-toggle="modal" href="#contactModal">Edit Contact</a>
{% include "contact.html" %}
...
</html>
编辑:
好的,现在我知道你可能有多个表单,将每个表单隐藏在html中可能是一个坏主意.您可能想要转到ajax-y版本,并根据需要加载每个表单.我在这里假设在表单提交时,整个页面将重新加载.如果您想异步提交表单,其他地方也有答案.
我们首先重新定义contact.html片段.它应该在一个模态中呈现,并包含与模态一起使用所需的所有标记.contact您原来的视图很好 - 除非表单无效,contact.html否则您将最终呈现其他内容.
<form class="well contact-form" method="post" action="/contact/edit/{{ item.id }}">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Editing Contact</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{form.as_p}} <!-- {{form|crispy}} if you use django-crispy-forms -->
</div>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" value="Save" />
<input name="cancel" class="btn" type="submit" value="Cancel"/>
</div>
</form>
现在,你的main_page.html:
<html>
.. snip ..
<a class="contact" href="#" data-form="/contact/edit/{{ item.id }}" title="Edit">edit</a>
<a class="contact" href="#" data-form="/contact/edit/{{ item.id }}" title="Edit">edit</a>
<a class="contact" href="#" data-form="/contact/edit/{{ item.id }}" title="Edit">edit</a>
<div class="modal hide" id="contactModal">
</div>
<script>
$(".contact").click(function(ev) { // for each edit contact url
ev.preventDefault(); // prevent navigation
var url = $(this).data("form"); // get the contact form url
$("#contactModal").load(url, function() { // load the url into the modal
$(this).modal('show'); // display the modal on url load
});
return false; // prevent the click propagation
});
$('.contact-form').live('submit', function() {
$.ajax({
type: $(this).attr('method'),
url: this.action,
data: $(this).serialize(),
context: this,
success: function(data, status) {
$('#contactModal').html(data);
}
});
return false;
});
</script>
.. snip ..
</html>
这都是未经测试的,但它应该为您提供一个开始/迭代的好地方.
| 归档时间： |
|
| 查看次数： |
43659 次 |
| 最近记录： |