如何在twitter-bootstrap模态窗口中插入Django表单？

小编典典

如何在twitter-bootstrap模态窗口中插入Django表单？

django

有人在四月份提出了完全相同的问题，没有任何答案。但是由于他提供的信息太少了；这个问题被放弃了。

我也有同样的问题。在main_page.html我有这行：

<a href="/contact/edit/{{ item.id }}" title="Edit">edit</a>

一旦你单击此处，编辑模板将出现在Twitter引导程序模式内。

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>

我可以把它放进去

阅读 346

2020-03-27

共1个答案

小编典典

除非你需要使用模态之外的联系表格，否则这应该对你有用。如果确实需要在其他地方使用它，请维护两个版本（一个模式，一个不使用）。另外，一个技巧-给django-crispy-forms一个过渡-它可以帮助你使用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>

这都是未经测试的，但它应该为你提供一个良好的起点/起点。

2020-03-27