We Keep Coding

Django Admin Page execute javascript on Custom Action Buttons

I'm trying to add a custom button in each row next to a user to the django admin page which makes it easier for the admin to click the button and generate a password reset link for a particular user rather than navigate to the hidden actions section of the django admin page.
Something like this - https://hakibenita.com/how-to-add-custom-action-buttons-to-django-admin
Following is the code I've implemented and it works and navigates to a new page with the correct reset-password request and the reset_password() method executes with a link being sent to the user.
However, when I click the button, I would like to send an AJAX GET request to the same url as above and just a show an alert to the admin on request completion instead of navigating to a new page. Currently I'm unable to run the javascript code using the format_html method in Django (see code below)
class UserAdmin(Admin.modelAdmin):
list_display = ('name', 'email', 'custom_actions')
form = forms.UserAdminForm
def get_urls(self):
urls = super().get_urls()
custom_urls = [
url(
r'reset-password/(?P<user_id>.+)',
self.admin_site.admin_view(self.reset-password),
name='reset-password',
),
]
return custom_urls + urls
def custom_actions(self, obj):
user = user_model.User.get(user_id=obj.id)
password_reset_url = reverse('admin:reset-password', args=[user.id])
return mark_safe(format_html(
f'<a class="button" onclick="parent.location=\'{password_reset_url}\'" >Reset Password</a> '
custom_actions.short_description = 'Custom Actions'
custom_actions.allow_tags = True
def reset_password(self, request, password_reset_id):
password_reset.send_password_reset_link(password_reset_id=password_reset_id)
return HttpResponse(status=200)
Below is the HTML/JS code that I was testing for the behavior I want on the page and works, I was hoping to the stitch the same into the above Django code but Django cannot execute and just shows the script as a string on the admin page.
<button id='jax' class="button">AJAX</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#jax").click(function(){
$.ajax({
type : "GET",
url : "my-dynamic-url",
timeout:10,
jsonp : "jsonp",
success : function (response, textS, xhr) {
console.log('oof')
alert("Password reset link has been resent");
},
error : function (xmlHttpRequest, textStatus, errorThrown) {
if(textStatus==='timeout')
alert("request timed out");
}
});
});
});
</script>
Is there a correct way to integrate the above javascript code on admin page on the click of the button?

Are you missing out on commas? From an example according to the documentation:
format_html("{} <b>{}</b> {}",
mark_safe(some_html),
some_text,
some_other_text,
)
Maybe you should wrap {password_reset_url} in commas and see if that works.
If this does not solve your problem, elaborating on this will be helpful:
Django cannot execute and just shows the script as a string on the admin page.
Which script are you referring to?

The solution:
Python:
class UserAdmin(Admin.modelAdmin):
list_display = ('name', 'email', 'custom_actions')
form = forms.UserAdminForm
def get_urls(self):
urls = super().get_urls()
custom_urls = [
url(
r'reset-password/(?P<user_id>.+)',
self.admin_site.admin_view(self.reset-password),
name='reset-password',
),
]
return custom_urls + urls
def custom_actions(self, obj):
user = user_model.User.get(user_id=obj.id)
password_reset_url = reverse('admin:reset-password', args=[user.id])
return mark_safe(format_html(
f'<a class="button" onclick="send_password_link(\'{password_reset_url}\'") >Reset Password</a> '
custom_actions.short_description = 'Custom Actions'
custom_actions.allow_tags = True
def reset_password(self, request, password_reset_id):
password_reset.send_password_reset_link(password_reset_id=password_reset_id)
return HttpResponse(status=200)
HTML:
This should be under base-app/templates/your-app/change_list.html
{% extends "admin/change_list.html" %}
{% load static %}
{% block content %}
<script src="{% static 'js/passwordReset.js' %}"></script>
<!-- Render the rest of the ChangeList view by calling block.super -->
{{ block.super }}
{% endblock %}
Javascript:
This should be under base-app/static/static/js/passwordReset.js
function send_password_link(url) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert('Password Reset Sent');
}
};
xhttp.open("GET", url, true);
xhttp.send();
}

Javascript - Editing Form with Fetch

I'm trying to edit an existing form on my site, and save the edits using Javascript (without requiring a refresh of the page). I'm using Django as well.
So far, when the user clicks 'edit' on the page, the form appropriately appears, showing the information already saved there. But when I click 'save' I get a 404 error.
The issue is in the Javascript function edit_post. I'm not sure if I have used stringify correctly either, I'm new to using Javascript with Django. Any help is appreciated.
function edit_handeler(element) {
id = element.getAttribute("data-id");
document.querySelector(`#post-edit-${id}`).style.display = "block";
document.querySelector(`#post-content-${id}`).style.display = "none";
// everything above this works and opens up the form for editing
edit_btn = document.querySelector(`#edit-btn-${id}`);
edit_btn.textContent = "Save";
edit_btn.setAttribute("class", "text-success edit");
if (edit_btn.textContent == "Save") {
edit_post(id, document.querySelector(`#post-edit-${id}`).value); //here
edit_btn.textContent = "Edit";
edit_btn.setAttribute("class", "text-primary edit");
}}
function edit_post(id, post) {
const body = document.querySelector(`#post-content-${id}`).value;
fetch("/edit_post/", {
method: "POST",
body: JSON.stringify({
body:body
})
}).then((res) => {
document.querySelector(`#post-content-${id}`).textContent = post;
document.querySelector(`#post-content-${id}`).style.display = "block";
document.querySelector(`#post-edit-${id}`).style.display = "none";
document.querySelector(`#post-edit-${id}`).value = post.trim();
});
}
Relevant html - this is inside a card, for the post itself in the html file:
<span id="post-content-{{i.id}}" class="post">{{i.text}}</span> <br>
<textarea data-id="{{i.id}}" id="post-edit-{{i.id}}"
style="display:none;" class="form-control textarea" row="3">{{i.text}}</textarea>
<button class="btn-btn primary" data-id="{{i.id}}" id="edit-btn-{{i.id}}"
onclick="edit_handeler(this)" >Edit</button> <br><br>
views.py
def edit_post(request, pk):
post = Post.objects.get(id=pk)
form = PostForm(instance=post)
if request.method == "POST":
form = PostForm(request.POST, instance=post)
if form.is_valid():
form.save()
return JsonResponse({}, status=201) # this works to edit and save to db
else:
if request.method == "GET":
form = PostForm(instance=post)
form_for_post = {'form': PostForm()}
return render(request, "network/make_post.html", {
"post": post,
"form_for_post": form,
})
urls.py (relevant ones)
path('edit_post/<str:pk>/', views.edit_post, name="edit_post"),
path('edit_post/', views.edit_post),
path("profile/<str:username>", views.profile, name="profile"),

Assuming you're running your django server locally and you're getting a 404 returned from your fetch request, then that means the url path does not exist. Either your django server isn't live or the url you're supplying the fetch request with is incorrect. If /edit_post/ is your desired endpoint, try fetching with the servers full request URL
Something like this
http://localhost:8000/edit_post
Replace 8000 with whatever port your server is running at.
Your fetch body is structured properly btw.

Tornado stream_request_body: how to write custom error msg to document element?

I have a tornado app using stream_request_body for uploading a file to server. File selection is a HTML form where JS onsubmit function is used to execute the upload handler. The JS function is async with await fetch. In case the user chooses a file above max allowed size then I use self.set_status(400) in def prepare(self). I would in this case also like to send/write a text string (self.write('File too big')?) that should be displayed in an element in the document as information to the user, how do I do this?
With my current JS script I get an error in the browser console:
Promise { <state>: "pending" }
TypeError: Response.json: Body has already been consumed.
Another issue I have with the setup of the tornado server is that eventhough I have a return in the def prepare(self) function when the file is larger than max allowed, then def data_received and def post are executed (the file is actually uploaded to server), why is that?
Any help/hints appreciated. I am new to tornado and JS, so sorry if the questions are very basic.
Using tornado ver 6.1, python 3.9
application.py
from tornado import version as tornado_version
from tornado.ioloop import IOLoop
import tornado.web
import uuid
import os
import json
MB = 1024 * 1024
GB = 1024 * MB
MAX_STREAMED_SIZE = 1024 #20 * GB
#tornado.web.stream_request_body
class UploadHandler(tornado.web.RequestHandler):
def initialize(self):
self.bytes_read = 0
self.loaded = 0
self.data = b''
def prepare(self):
self.content_len = int(self.request.headers.get('Content-Length'))
if self.content_len > MAX_STREAMED_SIZE:
txt = "Too big file"
print(txt)
self.set_status(400)
# how do I pass this txt to an document element?
self.write(json.dumps({'error': txt}))
# eventhough I have a return here execution is continued
# in data_received() and post() functions
# Why is that?
return
def data_received(self, chunk):
self.bytes_read += len(chunk)
self.data += chunk
def post(self):
value = self.data
fname = str(uuid.uuid4())
with open(fname, 'wb') as f:
f.write(value)
data = {'filename': fname}
print(json.dumps(data))
self.write(json.dumps(data))
class IndexHandler(tornado.web.RequestHandler):
def get(self):
self.render('index.html')
def main():
handlers = [(r'/', IndexHandler), (r'/upload', UploadHandler)]
settings = dict(debug=True, template_path=os.path.dirname(__file__))
app = tornado.web.Application(handlers, **settings)
print(app)
app.listen(9999, address='localhost')
IOLoop().current().start()
if __name__ == '__main__':
print('Listening on localhost:9999')
print('Tornado ver:', tornado_version)
main()
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Upload something!</title>
</head>
<body>
<h1>Upload</h1>
<form id="uploadForm">
<input type="file" name="file" id="file" />
<br />
<input type="submit" value="Upload">
</form>
<p><span id='display'></span></p>
<script>
uploadForm.onsubmit = async (e) => {
e.preventDefault();
var fileInput = document.getElementById('file');
var fileAttr = fileInput.files[0];
console.log(fileAttr);
var filename = fileInput.files[0].name;
console.log(filename);
document.getElementById('display').innerHTML =
'Uploading ' + document.getElementById("file").value;
let formData = new FormData(document.getElementById('uploadForm'));
try {
let response = await fetch(`${window.origin}/upload`, {
method: "POST",
body: formData,
});
if (!response.ok) {
console.log('error')
console.log(response.json());
// how do I update document.getElementById('display').innerHTML
// with tornado self.write when error response?
}
let result = await response.json();
console.log(result);
document.getElementById('display').innerHTML = 'Finished';
} catch(exception) {
console.log(exception);
}
};
</script>
</body>
</html>

In prepare it is not enough to return, you need to raise an exception to stop the processing.
So you have two options:
use provided features: overwrite write_error on your RequestHandler to create custom error responses, then raise tornado.web.HTTPError(400)[1] in prepare after your print
do everything yourself: use self.set_status to set an error status code, self.write, to write out whatever you need on the spot, then raise tornado.web.Finish to short circuit the processing of the request.
With your code as it is, you basically only need to replace the return in prepare with a raise tornado.web.Finish(). Obviously if you were going to do this in multiple places it makes sense to use #1, but if you only have the script you have now, #2 will do just fine.

Method not allowed on ajax request (keydown event active only while debugging)

I have a very strange problem with an AJAX request.
The server app.py
#### app.py
from flask import Flask, request, render_template
app = Flask(__name__)
app.debug = True
#app.route("/myajax", methods=['GET', 'POST'])
def mypostajaxreq():
print(request.form)
if request.method == "POST":
name = request.form["name"]
return " Hello " + name
else:
return "Just Hello"
#app.route("/")
def index():
return render_template("indexlistener.html")
if __name__ == "__main__":
app.run()
The indexlistener.html
<!DOCTYPE html>
<html>
<head>
<title>Practice AJAX</title>
<script type="text/javascript" src = "/static/js/myajaxrequestlistener.js"></script>
</head>
<body>
<form method="post">
<label>Name:<input type="text" id="name" value="" /></label>
<button type="button" id="btn-post">Click</button>
<div id="result"></div>
</form>
</body>
</html>
The myajaxrequestlistener.js file
function do_ajax ()
{
var req = new XMLHttpRequest();
var result = document.getElementById('result');
req.onreadystatechange = function()
{
if(this.readyState == 4 && this.status == 200) {
result.innerHTML = this.responseText;
}
}
req.open('POST', '/myajax', true);
req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
req.send("name=" + document.getElementById('name').value);
};
document.addEventListener('DOMContentLoaded', function()
{
document.getElementById("btn-post").addEventListener("click", function()
{
do_ajax();
})
})
document.addEventListener('DOMContentLoaded', function()
{
document.addEventListener("keydown", function(event)
{
if(event.key === "Enter")
{
do_ajax();
}
})
})
This works all well when I click the button, as expected it fires the mypostajaxreq in the python code, however when I press Enter it returns Error 405. Method not allowed. It is unclear to me why it's happening, I checked with the debugger and I am entering the listener event to keydown, in fact, even weirder, the code works when I use the debugger but it doesn't when I press Enter directly. I suspect it's due to the listener but I don't understand why it shouldn't work. Besides I don't understand the logic of the error (405) I'm receiving: in my understanding this should happen only when the route on the server side doesn't accept the request method is called from, but here I accept both and besides I'm firing only POST requests from the webpage. I'm new to web programming, thanks in advance.

Pressing enter in the only textbox in a form will submit the form, sending a POST to / which is not an allowed method to that route.
You can attach a submit handler to the form instead of a keydown
Also, you don't have to use multiple DOMContentLoaded event handlers.
document.addEventListener('DOMContentLoaded', function()
{
document.querySelector('form').addEventListener("submit", function(event)
{
event.preventDefault();
do_ajax();
});
document.getElementById("btn-post").addEventListener("click", do_ajax);
});

How to download a document generated with python-docx in Django project?

I'm trying to figure how to download a word document generated with python-docx in my django app (I'm still learning and this is the first time I working with documents); with the help of ajax I send all the information needed to the view and call a function that uses that information and returns the document, then I'm trying to send this document as response in order to download it with the help of a "Download" button (or show web browser download dialog) in the same template from where I'm submitting the data, but here is where I'm stuck.
to send this document as response in order to download it with the help of a "Download" button (or show web browser download dialog) in the same template from where I'm submitting the data, but here is where I'm stuck.
What I have until now is:
1) In javascript I'm sending the information as follows:
data = {
categoria: cat,
familia: fam,
Gcas: gcas,
FI: FI,
FF: FF,
Test: test,
Grafica: grafica
},
$.ajax({
type: 'post',
headers: {
"X-CSRFToken": csrftoken
},
url: url,
data: { json_data: JSON.stringify(data) },
success: function (response) {
$('#instrucciones').hide(); //Hide a div with a message
$('#btndesc').show(); //Show the button to download the file generated
}
});
return false;
}
2) In my Django view:
def Documento(request):
if request.method == "GET":
context={}
context['form'] = catForm
return render(request, 'report/report_base.html', context)
if request.method == 'POST':
#Data from ajax
datos = request.POST.get('json_data')
jsondata = json.loads(datos)
Gcas = jsondata['Gcas']
FI = jsondata['FI']
FF = jsondata['FF']
grafica = jsondata['Grafica']
#Using function to create the report
Reporte = ReporteWord(Gcas, FI, FF, grafica)
#Response
response = HttpResponse(content_type='application/vnd.openxmlformats-
officedocument.wordprocessingml.document')
response['Content-Disposition'] = 'attachment; filename = "Reporte.docx"'
response['Content-Encoding'] = 'UTF-8'
Reporte.save(response)
return response
3) My function to create the document looks like:
def ReporteWord( gcas, FI, FF, Chart):
#Cargamos el template
template = finders.find('otros/Template_reporte.docx')
document = Document(template)
#Header
logo = finders.find('otros/logo.png')
header = document.sections[0].header
paragraph = header.paragraphs[0]
r = paragraph.add_run()
r.add_picture(logo)
#Adding title
titulo = document.add_heading('', 0)
titulo.add_run('Mi reporte').bold = True
titulo.style.font.size=Pt(13)
.
Many other steps to add more content
.
.
#IF I SAVE THE FILE NORMALLY ALL WORKS FINE
#document.save(r'C:\tests\new_demo.docx')
return document
I'll be very grateful for any idea or suggestion, many thanks in advance.
NOTE: I've reviewed these answers (and others) without luck.
Q1, Q2, Q3, Q4
UPDATE: Thanks to the feedback received I finally found how to generate the document and show the download dialog:
As was suggested the best way to achieve its using the view and not ajax, so the final updates in the code are:
a) Update view to work as show in feedback
b) JavaScript - Ajax control for POST method was removed and now all is handled directly with python (no extra code needed)
1) View:
def Reporte(request):
if request.method == "GET":
context={}
context['form'] = catForm
return render(request, 'reportes/reporte_base.html', context)
if request.method == 'POST':
#Getting data needed after submit the form in the page
GcasID = request.POST.get('GCASS')
FI = request.POST.get('dp1')
FF = request.POST.get('dp2')
Grafica = request.POST.get('options')
#Function to obtain complete code from GcasID
Gcas = GcasNumber(GcasID)
#Report creation
Reporte = ReporteWord(Gcas, FI, FF, Grafica)
#PART UPDATED TO SHOW DOWNLOAD REPORT DIALOG
bio = io.BytesIO()
Reporte.save(bio) # save to memory stream
bio.seek(0) # rewind the stream
response = HttpResponse(
bio.getvalue(), # use the stream's contents
content_type="application/vnd.openxmlformats-officedocument.wordprocessingml.document",
)
response["Content-Disposition"] = 'attachment; filename = "Reporte.docx"'
response["Content-Encoding"] = "UTF-8"
return response
With those changes now when I press "Create report" (submit button of form) all works as expected (as a plus no more libraries are necessary). At the end as you suggested its easier do it in this way than using ajax.
Many thanks to all for your kind help.

Python-docx's Document.save() method accepts a stream instead of a filename. Thus, you can initialize an io.BytesIO() object to save the document into, then dump that to the user.
Reporte = ReporteWord(Gcas, FI, FF, grafica)
bio = io.BytesIO()
Reporte.save(bio) # save to memory stream
bio.seek(0) # rewind the stream
response = HttpResponse(
bio.getvalue(), # use the stream's contents
content_type="application/vnd.openxmlformats-officedocument.wordprocessingml.document",
)
response["Content-Disposition"] = 'attachment; filename = "Reporte.docx"'
response["Content-Encoding"] = "UTF-8"
return response
This will work if you use a regular link or a form to submit the request, but since you're using $.ajax, you may need to do additional work on the browser end to have the client download the file. It would be easier not to use $.ajax.

Yep, a cleaner options, as stated by wardk would be, using https://python-docx.readthedocs.org/:
from docx import Document
from django.http import HttpResponse
def download_docx(request):
document = Document()
document.add_heading('Document Title', 0)
response = HttpResponse(content_type='application/vnd.openxmlformats-officedocument.wordprocessingml.document')
response['Content-Disposition'] = 'attachment; filename=download.docx'
document.save(response)
return response
Know more