Incorporating JavaScript in Django admin's default model form

Other Questions JavaScript
1 
I'm trying to include a JavaScript function in the default model form that shows up on the Django admin site. The tricky part is I'm not using a separate HTML template for the form.

I've added a Media class inside the model form, but I'm not sure where to load it from. Here's what I've done so far:

1. Created an 'Example' model in models.py
2. Added extra fields to show in the admin panel
3. In admin.py, I have:

class ExampleForm(forms.ModelForm):
    class Meta:
        model = Example
        fields = "__all__"
    
    user_id = forms.CharField(required=False, max_length=100)
    secret_key = forms.CharField(widget=forms.PasswordInput, required=False, max_length=100)

    class Media:
        js = ('static/my_app/js/script.js',)

I've seen answers online that say to put a script tag in the HTML template. But I'm not using a template. If I need to add one, which should I use? I want to keep the default Django admin look.

Any ideas on how to make this work?
2

hey there! i’ve been in a similar spot.

instead of fiddling with the media class, override the admin class:

class ExampleAdmin(admin.ModelAdmin):
form = ExampleForm
class Media:
js = (‘my_app/js/script.js’,)

admin.site.register(Example, ExampleAdmin)

make sure your statics are set up right!

3

While using the Media class in your ModelForm is a good start, it won’t work directly in the admin without some template modifications. Here’s a workaround that might help:

Instead of adding the Media class to your form, try overriding the admin class for your model. In your admin.py, you can do something like this:

class ExampleAdmin(admin.ModelAdmin):
form = ExampleForm

class Media:
    js = ('my_app/js/script.js',)

admin.site.register(Example, ExampleAdmin)

This approach should inject your JavaScript into the admin interface without needing to modify templates. Make sure your static files are set up correctly in settings.py and that the path to your script is accurate.

If this doesn’t work, you might need to bite the bullet and use a custom template. It’s not as daunting as it sounds and gives you more flexibility in the long run.

4

I’ve been down this road before, and I can tell you it’s a bit tricky but definitely doable.

I ended up creating a custom admin template. It sounds daunting, but it’s actually pretty straightforward. First, I made a copy of the ‘change_form.html’ from Django’s admin templates and placed it in my app’s template directory. Then, I added the script tag directly in this custom template.

The key is to extend the original template and only add what you need. Something like this:

{% raw %}{% extends ‘admin/change_form.html’ %}
{% block extrahead %}
{{ block.super }}

{% endblock %}{% endraw %}

This approach maintains the default Django admin look while injecting your JavaScript. Ensure that your static files are correctly set up in settings.py. It might take a bit more work than using the Media class, but it gives you more control and can be reused for other models. Hope this helps!