Django模式弹出对话框实现

 

原文: https://www.abidibo.net/blog/2014/05/26/how-implement-modal-popup-django-forms-bootstrap/

作者:  Stefano Contini

 

前言

有时候我们希望在不离开主页或者索引页的情况下显示所有需要的用户信息，换句话说，就是让form表单显示在一个新层layer上，在一个弹出的模态窗口modal window里。

 

要在一个模态窗口渲染表单非常容易，只需要使用ajax请求并且将返回结果显示在你的模态窗口上即可。但是有的时候如果我们想继续操作这个表单就比较棘手了，尤其是出错的时候。通常情况下，django会重定向用户到一个显示出错的表单，但是如果表单本身并没有自己的页（自己的完整模板），只是存在于一个模态窗口中，我们怎么来处理这种情况呢？

 

这儿，我们将介绍一种方法来解决这个问题，它会用到django, bootstrap和modal，jquery和jquery form plugin

 

场景

 

我们有一些列表条目带有编辑按钮，当点击这些编辑按钮时，表单将会渲染到一个模态窗口中，让你在这个窗口中完成内容更新。

 

视图

 

我们使用django类的ListView和UpdateView，第一个用来管理条目列表，第二个用于条目更新。

 

from django.views.generic import UpdateView, ListView
from django.http import HttpResponse
from django.template.loader import render_to_string
from myapp.models import Item
from myapp.forms import ItemForm

"""
items list
"""
class ItemListView(ListView):
    model = Item
    template_name = 'myapp/item_list.html'

    def get_queryset(self):
        return Item.objects.all()

"""
Edit item
"""
class ItemUpdateView(UpdateView):
    model = Item
    form_class = ItemForm
    template_name = 'myapp/item_edit_form.html'

    def dispatch(self, *args, **kwargs):
        self.item_id = kwargs['pk']
        return super(ItemUpdateView, self).dispatch(*args, **kwargs)

    def form_valid(self, form):
        form.save()
        item = Item.objects.get(id=self.item_id)
        return HttpResponse(render_to_string('myapp/item_edit_form_success.html', {'item': it