Django: loading alluath template with form to div loads additional things

Question

I've one site website with simple account managing. I have a few divs to which I load some other things (other divs, django forms and stuff like that) using jQuery load() function and everything works perfectly fine. I want to use django allauth app for account managing and right now I'm trying to add functionality to load password_change template to some div. This password_change.html template looks like this:

<form method="POST" action="accounts/password/change/" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Submit" />
</form>

and here is template to which I'm trying to load it

<div>
    <div>
        <div onclick="$('#item').load('accounts/password/change');">Change password</button>
    </div>

    <div id="item"></div>
</div>

After clik on button load performes but instead of password change form I see some dictionary:

{"form": {"fields": {"oldpassword": {"widget": {"attrs": {"placeholder": "Current Password"}}, "value": null, "errors": [], "label": "Current Password", "help_text": ""}, "password1": {"widget": {"attrs": {"placeholder": "New Password"}}, "value": null, "errors": [], "label": "New Password", "help_text": ""}, "password2": {"widget": {"attrs": {"placeholder": "New Password (again)"}}, "value": null, "errors": [], "label": "New Password (again)", "help_text": ""}}, "field_order": ["oldpassword", "password1", "password2"], "errors": []}, "html": "\n \n  
Current Password: 
\"Current

\n
New password: 
\"New

\n
New password (again): 
\"New

\n  
\"Submit\"
\n
"}

I presume that it's pure Django object that was passed to template but I have no idea why. When I open accounts/password/change/ in my webbrowser it's displayed normally.

I'm not sure if it's django, allauth or jQuery problem. I'd be very greatful for any tips.

score 0 · Accepted Answer · answered Apr 23 '18 at 06:41

$.load() fires an ajax request, which means django-allauth will respond with a JSON Response.

If you'd like to embed a password change form here, you can do one of two things:

Simply use an iframe:

<div id="item">
    <iframe src="accounts/password/change/"></iframe>
</div>

Build and bind a custom form for the fields in the JSON Response

Django: loading alluath template with form to div loads additional things

1 Answers1