JavaScript for Widget in added inline

[Per Rosengren]

A django.forms.widgets.Widget can add javascript in its render function. This can include state variables related to the widget.

This problem applies to widgets in inline forms. When an extra inline is added (using javascript in admin), a special hidden empty inline is cloned, setup and showed. The widget javascript was applied to the hidden inline, so any state is connected to that.

What is needed is to not run the javascript for the empty inline's widget, and to trigger the javascript to run on any added (cloned) inline forms' widget. I suggest we modify django/contrib/admin/static/admin/js/inlines.js to trigger a custom event that contains the added DOM element. The widget code can then bind its activation function to that event, and apply it to the widget HTML within the event's element.

I can do the patch if you agree this is the way to solve it.

This is the widget javascript I currently use:

jQuery(document).ready(function ($) {
    $('.form-row:not(.empty-form) #id_{{ name }}').wymeditor({
    	basePath: '{% static "js/wymeditor/" %}',
        updateSelector: 'input[type=submit],',
        updateEvent: 'click',
        lang: '{{ language }}',
        skin: 'default',
		logoHtml: ''
    });
});

[Per Rosengren]

Patch: ​https://github.com/django/django/pull/542

My Widget uses this JS, which makes use of this patch:

jQuery(document).ready(function ($) {
	var setup = {
        basePath: '{% static "js/wymeditor/" %}',
        updateSelector: 'input[type=submit],',
        updateEvent: 'click',
        lang: '{{ language }}',
        skin: 'default',
        logoHtml: ''
    };
    {% if "__prefix__" not in name %}
	$('#id_{{ name }}').wymeditor(setup);
	{% else %}
	/* This is used in an empty form in the admin, that is used to clone new inline forms.
	 * Django feature #19314 adds the admin_add_row event that is used here. 
	 */
	django.jQuery(document).unbind('admin_add_row.{{ name }}');
	django.jQuery(document).bind('admin_add_row.{{ name }}', function(event, row_element) {
        $('.{{ name }}', row_element).wymeditor(setup);
    });
    {% endif %}
});

For the code above to work, the widget's render function adds {'class': name} to the attrs of the parent TextArea widget.

[Mark Lavin]

This is a similar approach as #15760 which also contains an event for form deletion.

[Per Rosengren]

Yes, this is exactly #15760.