Jquery on Change not working on ChoiceField

[yalit]

Hi there,

I'm trying to attach specific display on the values of a select drop-down (multiple choice field) but it's not working. I see that it's not the select itself that is displayed but an added with the following id : select2-id_ptype-container. Using jquery .change() on the select, nothing happens (as if due to the overwrite of the display, the change on the select isn't fired)

How should I approach this?

ptype = models.IntegerField(choices=TYPE_CHOICES, verbose_name="Type de la personne")

Select généré

<select id="id_ptype" name="ptype" required>

span ajouté

<span class="select2 select2-container select2-container--jet select2-container--below" dir="ltr" style="width: auto;">
<span class="selection">
    <span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-id_ptype-container">
        <span class="select2-selection__rendered" id="select2-id_ptype-container" title="Type1">Type1</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b>
        </span>
    </span>
</span>

[zodman]

EY ey!! im investing this issue.... First:

at this moment the django-jet@dev its broken with django.jQuery because its not defined. issues related this: https://github.com/geex-arts/django-jet/issues/284 https://github.com/geex-arts/django-jet/pull/229

that was intruduce by this commit: https://github.com/geex-arts/django-jet/commit/a0d8b503af92eac9a3d1970b70212872f6b23149#diff-00db1b427cdf9ae5b3b45e603ae3225a

@Ismael-VC try to fix the select problem. To fix this issue and the django.jQuery error the correct solution its with:

285

[zodman]

@Ismael-VC @SalahAdDin you are the most involved in django-jet checking the issues and PR plz check this and give me the approved with +1

[SalahAdDin]

@zodman, which one?

[zodman]

@SalahAdDin this comment https://github.com/geex-arts/django-jet/issues/161#issuecomment-360210596

[emukans]

I added custom select box to dashboard header and found this issue. This is what I did.

1. Applied @arbak fix. In admin/base.html.
2. Then I've encountered "Uncaught RangeError: Maximum call stack size exceeded" issue.

Solution using JQuery (Could be done without it as well, of course). Issue happens because of infinite recursive function call. Just select your select box and on change event stop propagation. This is an example.

jQuery('#my-select-box').on('change', function(e){
  e.stopPropagation()

  // needed actions
})

[SalahAdDin]

@emukans, @zodman, yes, this is a common error, if I'm not mistaken, that's why these code is using here.

[gabrielponto]

I was having this problem with custom pages. To fix, I added two javascript files to extrahead section on template:

{% block extrahead %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'admin/js/jquery.init.js' %}"></script>
{% endblock %}

Ps: Adding only the jquery.init.js file generate the error Uncaught RangeError: Maximum call stack size exceeded. So I added jquery.js on top and all works. These files comes from Django code base.

[SalahAdDin]

@gabrielponto Ok, but, what is the problem behind this bug?

[yevheniidehtiar]

Why this 3-years old bug is not fixed today??? I have it on last version 1.0.8

[SalahAdDin]

Because @f1nality , the first author, left it.

[thyagotosin]

:'(

[Xednom]

Is there any chances that this bug will be fixed, although it has been 3 yrs ago.

[itaisir]

remove the line in select.js

$select.on('change', function(e) {
      //      django.jQuery($select.get(0)).trigger(e);
        });

and make sure to create new bundle

[SalahAdDin]

all PR are well received.

[fergyfresh]

Just saw this one on version 1.0.8

[fergyfresh]

Uncaught TypeError: django.jQuery is not a function
    at HTMLSelectElement.<anonymous> (bundle.min.js?v=1.0.8:1)
    at HTMLSelectElement.dispatch (bundle.min.js?v=1.0.8:9)
    at HTMLSelectElement.m.handle (bundle.min.js?v=1.0.8:9)
    at Object.trigger (bundle.min.js?v=1.0.8:9)
    at HTMLSelectElement.<anonymous> (bundle.min.js?v=1.0.8:9)
    at Function.each (bundle.min.js?v=1.0.8:8)
    at ot.fn.init.each (bundle.min.js?v=1.0.8:7)
    at ot.fn.init.trigger (bundle.min.js?v=1.0.8:9)
    at n.select (bundle.min.js?v=1.0.8:12)
    at o.<anonymous> (bundle.min.js?v=1.0.8:12)

[SalahAdDin]

Never solved.

[fergyfresh]

@SalahAdDin this PR works for me.

[shihyuuuuuuu]

@SalahAdDin this PR works for me.

Thanks a lot, you saved my day.