#30025: dismiseAddRelatedObjectPopup() not executing change event for select element ---------------------------------------------+------------------------ Reporter: Alexander Todorov | Owner: nobody Type: Bug | Status: new Component: contrib.admin | Version: 2.1 Severity: Normal | Keywords: Triage Stage: Unreviewed | Has patch: 0 Needs documentation: 0 | Needs tests: 0 Patch needs improvement: 0 | Easy pickings: 0 UI/UX: 0 | ---------------------------------------------+------------------------ When using the functions from `admin/RelatedObjectLookups.js` to pop-up a new window and add new record in the database upon closing the pop-up window we call `dismiseAddRelatedObjectPopup()` which contains these 2 lines, see [https://github.com/django/django/commit/07988744b347302925bc6cc66511e34224db55ab #diff-ec17958cc9f7c2542303557dfc4ad997 0798874]
{{{ elem.options[elem.options.length] = new Option(newRepr, newId, true, true); .... // Trigger a change event to update related links if required. $(elem).trigger('change'); }}} Here `elem` is the select tag which is being updated. The trouble is that onchange event is not triggered. To reproduce I have the following: {{{ $(document).ready(function() { $('#id_build').change(function(){ console.log('===== id_build on change'); }); $('#add_id_build').click(function() { return showRelatedObjectPopup(this); }); }); }}} {{{ <a href="{% url 'admin:management_build_add' %}?_popup=1&product={{ test_plan.product_id }}" id="add_id_build">+</a> <select class="form-control" id="id_build" name="build"> {% for option in form.build.field.queryset %} <option value="{{ option.pk }}" {% if option.pk == form.build.value %}selected{% endif %}>{{ option.name }}</option> {% endfor %} </select> }}} After clicking the + button I can add a new Build record and the options array for the select field is updated. However browser dev tools doesn't show the log printed from the on change handler. If I change the options with the mouse the log statement is shown. My speculation so far is that modifying `elem.options` directly somehow doesn't change the internal state of the select element and it doesn't know it has changed. As a result `$(elem).trigger('change')` does nothing. This is really important for [http://kiwitcms.org Kiwi TCMS] because we allow users to add related objects and make use of them without reloading the page. On some pages there are multiple related objects which depend on each other, e.g. Product -> Version -> Build. I can work on contributing a patch but I'm stuck figuring out what is going wrong. -- Ticket URL: <https://code.djangoproject.com/ticket/30025> Django <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To post to this group, send email to django-updates@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/051.91e5b0adf368f3b46c03950a8309a543%40djangoproject.com. For more options, visit https://groups.google.com/d/optout.