django-select2 $element.select2 is not a function in modal

[rez0n]

Problem
Using django-select2 fields in Bootstrap modal (provided by django-bootstrap-modal-forms) I faced with issue that first time you open modal it can't initialize select2 inputs due to DOM is not ready.
Browser console log looks like

XHR finished loading: GET "http://localhost:7002/static/django_select2/django_select2.js".
XHR finished loading: GET "http://localhost:7002/documents/63/attach/".

jQuery.Deferred exception: $element.select2 is not a function TypeError: $element.select2 is not a function
    at initHeavy (<anonymous>:48:14)
    at HTMLSelectElement.<anonymous> (<anonymous>:56:9)
    at Function.each (https://code.jquery.com/jquery-3.5.1.min.js:2:2976)
    at S.fn.init.$.fn.djangoSelect2 (<anonymous>:53:7)
    at HTMLDocument.<anonymous> (<anonymous>:71:26)
    at e (https://code.jquery.com/jquery-3.5.1.min.js:2:30005)
    at t (https://code.jquery.com/jquery-3.5.1.min.js:2:30307) undefined

Uncaught TypeError: $element.select2 is not a function
    at initHeavy (<anonymous>:48:14)
    at HTMLSelectElement.<anonymous> (<anonymous>:56:9)
    at Function.each (jquery-3.5.1.min.js:2)
    at S.fn.init.$.fn.djangoSelect2 (<anonymous>:53:7)
    at HTMLDocument.<anonymous> (<anonymous>:71:26)
    at e (jquery-3.5.1.min.js:2)
    at t (jquery-3.5.1.min.js:2)

Code Snippet
Modal initiator (/documents/63) page

    <div class="modal fade" role="dialog" id="modal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content"></div>
        </div>
    </div>

Modal content (/documents/63/attach/)

<form method="post" action="">
  {% csrf_token %}

 <div class="modal-header">
    <h5 class="modal-title">{{title}}</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">
    {% for field in form %}
      <div class="form-group{% if field.errors %} is-invalid{% endif %}">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {{ field }}
        {% for error in field.errors %}
          <p class="help-block">{{ error }}</p>
        {% endfor %}
      </div>
    {% endfor %}
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
    <button type="submit" class="submit-btn btn btn-dark">Save</button>
  </div>

</form>

I assume the main issue that is django-select2 initialize inputs before it was loaded. I applied a workaround to re-initialize inputs in 100ms after the modal opens, it works correctly but I have an error in the console on each first modal open.

{{ form.media }}
<script>
$('#modal').ready(function() {
  setTimeout(() => {
    $('.django-select2').djangoSelect2({
        dropdownParent: $('#modal'),
        width: '100%'
    });
     }, 100);

});
</script>

Any suggestions to get it works correctly in the modal?

[codingjoe]

Hi @rez0n,
Thanks for reaching out. Looking at the stacktrace, I noticed that you seem to be missing the select2 script itself. Are you sure it's loaded? If you need any help, the network logs and a rendered template would be helpful for me to further investigate the problem.
Best,
Joe

[rez0n]

Take a look, seems it loads succesfuly on modal open.

I will create a simple app to demonstrate the issue, is it ok?

[rez0n]

I created a demo app: https://github.com/rez0n/django-select2-bootstrap-modal
For your convenience I give an command list to start the app.

git clone [email protected]:rez0n/django-select2-bootstrap-modal.git
cd django-select2-bootstrap-modal
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
python manage.py runserver 127.0.0.1:7009

The demo app contains Category and Post objects. The database contains a single post and few categories.
Go to the page: http://localhost:7009/1/ and you will see "Select Category" button that opens the modal with django-select2.

[rez0n]

I'm faced with the same issue using another JS library (datepicker), reported to the django-bootstrap-modal-forms issues, maybe they can help with that.

[codingjoe]

Hi @rez0n, yes, I believe it's best to discuss this over at django-bootstrap-model-forms. This seems to be related to them loading the JS with the modal, which is somewhat strange.

[trco]

Hi, I'm the author of django-bootstrap-modal-forms and I researched mentioned "issue". Here are my findings trco/django-bootstrap-modal-forms#158 (comment).

As you can see linking local static select2.min.js through the setting SELECT_JS that your package offers didn't help, however passing the same js file directly through the form's Media class works like a charm.

Maybe worth checking out from your side with @rez0n repository why the select2 method is not available in modal before it's called on form field. I don't see a relation to django-bootstrap-modal-forms at the moment.

Thanks and keep up the good work on open source projects.