Django 2 form in modal

Question

Im tries to open in Django the user edit form in Bootstrap modal. But the form is empty, only the save button is shown. But I don't understand how I can make the connection. If I call the edit page directly, then I can edit the user 127.0.0.1:8000/account/edit/

index.html, includes the referral to the form

{% 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'
        )

Im using: Python 3.6.3 Django 2.0.7 Windows 8.1 Bootstrap 3.3.6 JQuery 1.12.0

Answer 1

I think that variable form doesn't exist and you use in template just user_form not form variable

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

Try use it:

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

Answer 2

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

Only this in edit_profile.html, but still the same results.

Answer 3

Maybe you could try the code I wrote and you can find it at django-bootstrap-modal-forms . You will be able to bind your form to the modal and all of the validation stuff will work out of the box.

1. You will create a trigger element opening the modal
2. Your selected form will be appended to the opened modal
3. On submit the form will be POSTed via AJAX request to form's URL
4. Unsuccessful POST request will return errors, which will be shown under form fields in modal
5. Successful POST request will redirects to selected success URL