模态的Django 2形式

时间:2018-08-06 17:48:26

标签: python django python-3.x modal-dialog

我尝试在Django中以Bootstrap模式打开用户编辑表单。但是表格为空,仅显示保存按钮。但是我不明白如何建立连接。如果直接调用编辑页面,则可以编辑用户 127.0.0.1:8000/帐户/编辑/

index.html,包括对表格的引荐

{% extends 'base.html' %}
{% block head %}
{% endblock %}
{% block body %}
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    {% if error_message %}
                        <p><strong>{{ error_message }}</strong></p>
                    {% endif %}
                <form action="{% url 'account:edit_profile' %}">
                    <input type="submit" value="Edit" />
                </form>
                <form action="{% url 'account:change_password' %}">
                    <input type="submit" value="Change Login" />
                </form>
                    <br>
<a href="#" role="button" data-toggle="modal" data-target="#edit-profile-modal">Open Modal</a>
                    <br>
                            <div class="control-label col-sm-2">
                                First name:
                            </div>
                            <div class="col-sm-2">
                                {{ user.first_name }}
                            </div><br>
                            <div class="control-label col-sm-2">
                                Last name:
                            </div>
                            <div class="col-sm-2">
                                {{ user.last_name }}
                            </div><br>
                            <div class="control-label col-sm-2">
                                Email:
                            </div>
                            <div class="col-sm-2">
                                {{ user.email }}
                            </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="modal fade" id="edit-profile-modal" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" align="center">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </div>
                <div id="div-forms">
                    {% include "account/edit_profile.html"  with form=form %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

edit_profile.html

{% block head %}
{% endblock %}
{% block body %}
    <div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    <h3>Profile</h3>
                    {% if error_message %}
                        <p><strong>{{ error_message }}</strong></p>
                    {% endif %}
                         <form method="post">
                            {% csrf_token %}
                            {{ user_form.as_p }}
                            <button type="submit">Save</button>
                        </form>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}

views.py

def edit_profile(request):
    if request.method == 'POST':
        user_form = EditUserForm(request.POST, instance=request.user)
        if all([user_form.is_valid(), profile_form.is_valid()]):
            user_form.save()
            return render(request, 'account/index.html')
    else:
        user_form = EditUserForm(instance=request.user)
        args = {'user_form': user_form}
        return render(request, 'account/edit_profile.html', args)

urls.py

urlpatterns = [
    ...
    url(r'^edit/$', views.edit_profile, name='edit_profile'),
    ...
]

forms.py

class EditUserForm(forms.ModelForm):
    class Meta:
        model = User
        fields = (
            'email',
            'first_name',
            'last_name'
        )

我正在使用: Python 3.6.3 的Django 2.0.7 Windows 8.1 引导程序3.3.6 jQuery 1.12.0

3 个答案:

答案 0 :(得分:0)

我认为变量形式不存在,您只在模板中使用 user_form 而不是 form 变量

{% include "account/edit_profile.html"  with form=form %}

尝试使用它:

{% include "account/edit_profile.html"  with user_form=user_form %}

答案 1 :(得分:0)

    <form method="post">
    {% csrf_token %}
    {{ user_form }}
    <button type="submit">Save</button>
    </form>

仅在edit_profile.html中显示,但结果仍然相同。

答案 2 :(得分:0)

也许您可以尝试我编写的代码,并且可以在django-bootstrap-modal-forms上找到它。您将能够将表单绑定到模式,所有验证内容都将立即可用。

  1. 您将创建一个触发元素,以打开模式
  2. 您选择的表格将被添加到打开的模式中
  3. 提交后,将通过AJAX请求将表单过帐到表单的URL
  4. 不成功的POST请求将返回错误,该错误将显示在模式形式的表单字段下
  5. 成功的POST请求将重定向到所选的成功URL