Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#30025 closed Bug (needsinfo)

dismiseAddRelatedObjectPopup() not executing change event for select element

Reported by: Alexander Todorov Owned by: nobody
Component: contrib.admin Version: 2.1
Severity: Normal Keywords:
Cc: Triage Stage: Unreviewed
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description

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 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 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.

Change History (4)

comment:1 by Carlton Gibson, 6 years ago

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!

comment:2 by Carlton Gibson, 6 years ago

Resolution: needsinfo
Status: newclosed

comment:3 by Alexander Todorov, 6 years ago

Hi Carlton,
in my particular case we have a styled 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.

Last edited 6 years ago by Alexander Todorov (previous) (diff)

comment:4 by Carlton Gibson, 6 years ago

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.

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