Django: Best Way to Add Javascript to Custom Widgets

Question

I'm writing a custom widget that requires some supporting javascript code that I need output somehwere.

The options are:

1. Dump it right after the html code.
2. Append it to the form's media.
3. Append it to a global onReady section.

My gut instinct is to avoid things like:

<!-- original widget output -->
<input id="date" />
<-- Appended javascript -->
<script type="text/javascript">
jQuery('#date').datepicker()
</script> 

Instead, I've opted for item 3) most recently in my PHP projects. Does Django have a nice way of doing 2 or 3? I'm hoping that I can utilize this methodology from the context of my widget's render function. This may preclude option 2) if my widget doesn't have a any idea of the form it's on.

Answer 1

Take a look at form media http://docs.djangoproject.com/en/dev/topics/forms/media/#topics-forms-media

Answer 2

If you're looking at adding some inline JavaScript below your Django form field you can add overwrite the render method on a form field. Below I've created a custom input field, grabbed the rendered HTML and appended a new <script>...</script> to the output.

from django import forms
from django.utils.safestring import mark_safe

class CustomInputField(forms.TextInput):

    def render(self, name, value, attrs=None, renderer=None):
        html = super().render(name, value, attrs)
        inline_code = mark_safe(
            "<script>jQuery('#date').datepicker()</script>"
        )
        return html + inline_code

This will put the right below your form field in the HTML.