I am trying to add a custom javascript file to a Django admin model page. I am using a class Media in the ModelAdmin, but the file is been loaded in the head section. I need at the end of the file. Does anyone knows how to do that?
Thank you all!
class Media:
js = (
'js/jquery.mask.min.js',
'js/mask.js',
)
The aim of these scripts is to have masks working for some fields in the form.
You can extend the template files of the admin section and put them in there directly. See https://docs.djangoproject.com/en/2.2/ref/contrib/admin/#overriding-admin-templates
I have done it in some of my own projects. For example, in your templates folder, you can have:
/templates/admin/base_site.html
In that file you can make whatever changes you want (same as regular Django templates). In your case, it would probably be something like this:
{% extends 'admin/base_site.html' %}
{% load static %}
{% block footer %}
<div id="footer"></div>
<script src="whatever/source/jquery.js" />
<script src="whatever/source/mask.js" />
{% endblock %}
Hope this helps!
Use window.addEventListener:
window.addEventListener('load', function() {
(function ($) {
// Code
})(django.jQuery);
});
Another way:
window.onload = function () {
if (typeof (django) !== 'undefined' && typeof (django.jQuery) !== 'undefined') {
(function ($) {
// Code
}(django.jQuery));
}
};
in javascript code, you should force code to run after page load. for example in jQuery:
$(function(){
/* this code runs after page load */
});
base on the @sam-creamer answer, I changed the script tag:
{% extends 'admin/base_site.html' %}
{% load static %}
{% block footer %}
<script src="{%static '/whatever/source/jquery.js' %}"></script>
<script src="{%static '/whatever/source/mask.js' %}"></script>
{% endblock %}
