Django管理页面在自定义操作按钮上执行javascript

Question

我正试图在django管理页面的每一行用户旁边添加一个自定义按钮，这使管理员更容易单击该按钮并为特定用户生成密码重置链接，而不是导航到django管理员页面的隐藏actions部分。

像这样的东西https://hakibenita.com/how-to-add-custom-action-buttons-to-django-admin

以下是我实现的代码，它可以使用正确的reset-password请求导航到一个新页面，reset_password()方法执行时会向用户发送一个链接。

然而，当我单击该按钮时，我想向上面的相同url发送AJAXGET请求，并在请求完成时向管理员显示一个警报，而不是导航到新页面。目前我无法在Django中使用format_html方法运行javascript代码(见下面的代码(

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>&nbsp;'
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/JS代码，我希望将其缝合到上面的Django代码中，但Django无法执行，只是在管理页面上以字符串的形式显示脚本。

<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>

有没有一种正确的方法可以在点击按钮后将上面的javascript代码集成到管理页面上？

Answer 1

您是否遗漏了逗号？根据文件的一个例子：

format_html("{} <b>{}</b> {}",
mark_safe(some_html),
some_text,
some_other_text,
)

也许您应该用逗号将{password_reset_url}包装起来，看看这是否有效。

如果这不能解决你的问题，详细说明这一点将有所帮助：

Django无法执行，只能在管理页面上将脚本显示为字符串。

您指的是哪个脚本？

Answer 2

解决方案：

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>&nbsp;'
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:这应该在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：这应该在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();
}