Django-Select2 does not work.

[bguerrero5]

Hi,

I implemented django-bootstrap-modal-forms and for some reason django-select2 drop down does not work. By any chance would you have a work around to make django-select to work with django-bootstrap-modal-forms?

[trco]

@bguerrero5 I don't know how django-select2 implements select2 but you could load select2 js and css, select your dropdown within the script living in your form's html and run .select2() on it.

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

  <div class="modal-header">
    ...
  </div>

  <div class="modal-body">
    {% for field in form %}
      ...
    {% endfor %}
  </div>

  <div class="modal-footer">
    ...
  </div>
</form>

<script type="text/javascript">
  $(function () {
     $(".your-class").select2();
  });
</script>

[bguerrero5]

Thank for the fast response @trco. It is still not working. I am not sure whats causing the problem. I am also using crispy froms. Do you think that could be the problem?

[trco]

@bguerrero5 You should provide some error log or code so I can see what's happening. It's hard to debug on ''for some reason django-select2 drop down does not work''.

[bguerrero5]

@trco well I am not getting any error with my interpreter. But, in the console at the browser developer tools i can see a couple of error with the java-script. Attached you can find some screenshots of this errors. The screenshots have been uploaded in the order they appear in the browser.

[trco]

@bguerrero5 Is it possible that you didn't include select2 js and css files together with my proposed solution? You're calling select2 function on an element, but the function obviously doesn't exist.

[bguerrero5]

@trco yeah, i am calling the select2 function. it looks like this. I am not really good with java-script but i believe it is right.

{% load static %}
{% load crispy_forms_tags %}

{% csrf_token %}

{{ title }}

×

{% crispy form %}

<script type="text/javascript"> $(function () { $("#id_destination_ou").select2(); }) </script>

[bguerrero5]

Sorry, here is a better screenshot.

[trco]

@bguerrero5 You should load js and css for select2. Either download it to your static folder and link to it or link to select2 cdns as written in their docs.

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

[bguerrero5]

@trco when i load the js and ccs for select2, it still not works. But now i get a different error at the console.

[trco]

@bguerrero5 Unfortunately I can't conclude anything from that. I still suggest you to try out select2 without django-select2. Load js and css and than instantiate select2 on fields you get by their ids.

[trco]

Closing due to inactivity.