Opened 3 years ago

Closed 3 years ago

#19314 closed New feature (duplicate)

JavaScript for Widget in added inline

Reported by: per856 Owned by: per856
Component: contrib.admin Version: master
Severity: Normal Keywords: admin forms
Cc: Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no


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: ''

Change History (5)

comment:1 Changed 3 years ago by per856

  • Needs documentation unset
  • Needs tests unset
  • Owner changed from nobody to per856
  • Patch needs improvement unset
  • Status changed from new to assigned

comment:2 Changed 3 years ago by jezdez

  • Triage Stage changed from Unreviewed to Accepted

comment:3 Changed 3 years ago by per856

  • Has patch set


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.

comment:4 Changed 3 years ago by mlavin

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

comment:5 Changed 3 years ago by per856

  • Resolution set to duplicate
  • Status changed from assigned to closed

Yes, this is exactly #15760.

Note: See TracTickets for help on using tickets.
Back to Top