[Django] #30025: dismiseAddRelatedObjectPopup() not executing change event for select element
Django
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.
Django
element
Reporter: Alexander Todorov | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 2.1
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Comment (by Carlton Gibson):
Hi Alexander.
This all seems to work as expected in the minimal case:
https://jsfiddle.net/fnv5Lcom/3/
Adding the `Option` **doesn't** fire the `change` handler, as expected, so
we call `trigger()` to do so.
Are you able to examine what's going on in the debugger, to ensure you're
on the right branch, and that `elem` points to the element you're
expecting and so on?
If you could upload a minimal project (starting from `startproject`) that
showed the problem that would help.
Thanks!
--
Ticket URL: <https://code.djangoproject.com/ticket/30025#comment:1>
Django
element
Reporter: Alexander Todorov | Owner: nobody
Component: contrib.admin | Version: 2.1
Severity: Normal | Resolution: needsinfo
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Carlton Gibson):
* status: new => closed
* resolution: => needsinfo
--
Ticket URL: <https://code.djangoproject.com/ticket/30025#comment:2>
Django
element
Reporter: Alexander Todorov | Owner: nobody
Component: contrib.admin | Version: 2.1
Severity: Normal | Resolution: needsinfo
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Comment (by Alexander Todorov):
Hi Carlton,
in my particular case we have a styles select widget (bootstrap select)
which will receive the newly added records and it had a change event
defined like so:
{{{
$(select).change(function() { ... })
}}}
this was not triggered. However we changed it to:
{{{
document.getElemebtById(select).onchange = function() { .... }
}}}
and the later handler gets triggered after the popup closes. I'm not quite
certain what is the difference between the jQuery change handler and the
DOM onchange one.
If you think there's nothing Django can do about this you can close this
ticket.
--
Ticket URL: <https://code.djangoproject.com/ticket/30025#comment:3>
Django
element
Reporter: Alexander Todorov | Owner: nobody
Component: contrib.admin | Version: 2.1
Severity: Normal | Resolution: needsinfo
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Comment (by Carlton Gibson):
Hmmm. 🙂
It’s not so much that we can’t necessarily do something about it, but that
it’s not clear yet what the issue is.
Glad you resolved your issue.
Lets leave this as `needsinfo` for now. If someone stubbles across the
same, maybe they can add more.
--
Ticket URL: <https://code.djangoproject.com/ticket/30025#comment:4>