Select2 takes a long time to load

Samuel D. 0
Viewed 65

When I use select2 in rails and reload this entry appears for 1 second

enter image description here

Then it goes back to normal like the following picture:

enter image description here

This is my code and I have tried placing it in css display hidden and visibility true without any success

javascript:
  $("#js-customer").select2({
    maximumSelectionLength: 15,
    minimumInputLength: 1,
    tags: true,
    tokenSeparators: [',', ' '],
    
    language: {
      maximumSelected: function (e) {
        return I18n.t('customers.limit_max');
      },

      inputTooShort: function (e) {
        return I18n.t('customers.limit_min');
      },

      noResults: function(){
        return I18n.t('customers.not_result_found');
      }
    },
  });

and this is my input tags:

= f.input :tag_ids, collection: Tag.all, input_html: { class: "js-example-basic-multiple js-example-responsive", multiple: true, id: "js-customer"}, include_blank: false

I would greatly appreciate help on this issue.

select2-rails jquery-select2 ruby-on-rails jquery
2 Answers

I solved it by removing the css styles and the multiple:true from the tag_ids input

= f.input :tag_ids, collection: Tag.all, input_html: { id: "js-customer"}, include_blank: false

with this it no longer reloads slowly or creates duplicity in the collection

Samuel D.0

The problem was that the select2 was loading before the page was loaded.

Try to add the following code:

$(document).ready(function() {
// $(document).on('turbolinks:load', function() {
  $("#js-customer").select2({
    maximumSelectionLength: 15,
    minimumInputLength: 1,
    tags: true,
    tokenSeparators: [',', ' '],
    [...]
Tibic40
Related