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

Attachments (0)

Change History (5)

comment:1 Changed 20 months 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 20 months ago by jezdez

  • Triage Stage changed from Unreviewed to Accepted

comment:3 Changed 20 months 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 20 months ago by mlavin

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

comment:5 Changed 20 months ago by per856

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

Yes, this is exactly #15760.

Add Comment

Modify Ticket

Change Properties
<Author field>
as closed
as The resolution will be set. Next status will be 'closed'
The resolution will be deleted. Next status will be 'new'

E-mail address and user name can be saved in the Preferences.

Note: See TracTickets for help on using tickets.