django dynamic javascript in custom widget - django

Question

I have a javascript code in rendered html page of custom widget. I want to move the js code to separate js file.
However, it must be dynamic not static media file.
I wrote a custom widget:
class CustomWidget(CustomWidgetBase):
css = {
'all': (
config['custom_css'] +
config['extra_css']
)
}
js = (
config['custom_js'] +
config['extra_js']
)
#property
def media(self):
media = super(CustomWidget, self).media
media.add_css(CustomWidget.css)
media.add_js(CustomWidget.js)
return media
def render(self, name, value, attrs=None):
attrs_for_textarea = attrs.copy()
attrs_for_textarea['hidden'] = 'true'
attrs_for_textarea['id'] += '-textarea'
html = super(CustomWidget, self).render(name, value, attrs_for_textarea)
html += render_to_string(
'app/custom_widget.html',
{
'id': attrs['id'].replace('-', '_'),
'id_src': attrs['id'],
'value': value if value else '',
'settings': json.dumps(self.template_contexts()),
'STATIC_URL': settings.STATIC_URL,
'CSRF_COOKIE_NAME': settings.CSRF_COOKIE_NAME,
}
)
CustomWidget.js += (os.path.join(settings.STATIC_URL, 'app/my.js'),)
return mark_safe(html)
'app/custom_widget.html' has javascript code:
{% load staticfiles %}
<div id='{{ id_src }}'>{{ value|safe }}</div>
<script>
$(function() {
var {{ id }}_textarea = window.document.getElementById('{{ id_src }}-textarea');
... omitted ...
I'd like to move javascript code in 'app/custom_widget.html' into 'app/my.js' because it makes widget code dependent on the order of javascript declarations.
Thus, 'app/my.js' must be dynamically generated with the values passed by Django view. I want to place 'app/my.js' at the bottom of the page.
Thank you.

Answer 1

Two options:
You can put a list of variable declarations in a script tag in your template, making sure they're declared before you import your static javascript. Then your static javascript refers to variable values that it knows were appropriately set by the server.
Put your dynamic values in data attributes in your HTML elements. Then write your static javascript to look up the appropriate server-set data based on what it's manipulating.
What you’re doing in your sample code looks very complex and I’m not sure it needs to be. If I interpret correctly, you are trying to make sure that when you insert a custom widget, a custom javascript behaviour will be applied to it.
I think the second option is more appropriate for that behaviour and that you should probably use jquery to make it as simple to implement as possible.
Firstly, in your custom widget’s html template, give your custom widget a class that lets your javascript know to apply custom behaviours to it.
eg,
<input class=“custom-behaviour-widget” data-id_name=“{{ id }}" data-other_variable_name=“other_variable-value" …>
Then write static javascript that looks like:
<script>
$( document ).ready(function () {
$(‘.custom-behaviour-widget’).each(
value_that_i_want = $(this).data(‘id_name’);
...
);
});
</script>