Can not get/set ajax data on rails 5.2 NOT WORK

[rollyar]

Hi, I have rails 5.2 and ruby 2.5.1,
i installed "gem rails-select2"
and added to application.js

//= require select2-full
//= require select2_locale_es  

and added to application.scss

@import "select2";
@import "select2-bootstrap";

and this is sample of call in provider.coffe.erb

$('#provider_provider_type_id').select2
    ajax:
      url: '<%= url.admin_provider_types_path(format: :json) %>'
      dataType: 'json'
      delay: 250
      cache: true
      data: (term, page) ->
        {
          q: term
          page: page
        }
      results: (data) ->
        myResults = []
        $.each data, (index, provider_type) ->
          myResults.push
            'id': provider_type.id
            'text': provider_type.description
          return
        { results: myResults }
    minimumInputLength: 3
    initSelection: (element, callback) ->
      if element.val().length > 0
        data = element.data('pre')
        serv_data =
          id: data['id']
          text: data['description']
        callback serv_data

and this is a fragment of view

  <div class="form-group required">
        <%= f.label :provider_type_id, type: 'number', class: 'col-sm-4 control-label required' %>
        <div class="col-sm-8">
          <%= f.text_field :provider_type_id, class: "form-control",
                          'data-pre' => "#{@provider.provider_type.to_json unless @provider.provider_type_id.blank?}" %>
        </div>
      </div>

what is wrong, what make bad? Tanks for your help!

[bsa7]

Hi! This example working for me in Rails 5:

1. haml _form.html.haml:

    = f.association :company, as: :select,
      collection: [['All', nil], [f.object.company.name, f.object.company_id]],
      label: "Company",
      required: true,
      input_html: { class: 'select2', data: { url: company_suggestions_url } }

2. coffee initializer select2.initializer.coffee:

$(document).on 'ready', ->
  Select2Helper.initialize()

3. coffee helper select2.helper.coffee:

class window.Select2Helper
  @initialize: ->
    select2DomElements = document.querySelectorAll('select.select2')
    select2DomElements.forEach (select2) ->
      url = select2.getAttribute('data-url')
      labelMethod = select2.getAttribute('data-label-method')
      containsOption = select2.getAttribute('data-contains-option')
      ajax = undefined

      if url != null
        ajax =
          url: url
          dataType: 'json'
          delay: 250
          data: (params) ->
            query = {}
            query[select2.id] = (params.query || {}).term || params.term

            { contains_option: containsOption, query: params.term, label_method: labelMethod }
          processResults: (data, params) ->
            res = []
            res.push(id: 'contains:', text: 'Все', html: 'All') if data.length
            for item in data
              id = undefined
              html = undefined
              if typeof item == 'string'
                id = item
                html = item
              else if Array.isArray(item)
                [html, id] = item
              else if typeof item == 'object' && item.id
                if item.text || item.html
                  { id, text, html } = item
                else
                  id = item.id
                  delete item.id
                  html = item[Object.keys(item)[0]]
              text = html.replace(/<[^>]+>/g, '')
              item =
                id: id
                html: html
                text: text
                title: text

              res.push(item)

            { results: res }

      $(select2).select2
        allowClear: true
        language: 'en-EN'
        placeholder: 'All'
        minimumResultsForSearch: 0
        multiple: select2.getAttribute('multiple')
        ajax: ajax

      $(select2).on "select2:clear", (evt) ->
        $(this).on "select2:opening.cancelOpen", (evt) ->
          evt.preventDefault()
          $(this).off("select2:opening.cancelOpen")

  @formatResult: (node) ->
    if typeof (node.id) is 'string' && /^contains:/.test(node.id)
      node.html = $("<span class=\"contains\">#{node.text}</span>")
    else if typeof (node.id) is 'string' && /^<.+\/>$/
      node.html = $(node.html)
    node

4. my application.js:

...
//= require select2-full
//= require select2_locale_ru
...
//= require select2_init.

How it working:

1. haml is rendered this html:

<select class="form-control select required select2 select2-hidden-accessible" data-url="https://.../company_suggestions" required="required" aria-required="true" name="company" id="company" data-select2-id="company" tabindex="-1" aria-hidden="true">
  <option value="" data-select2-id="2"></option>
  <option selected="selected" value="2" data-select2-id="3">Macdonalds1</option>
</select>

2. After dom ready select2.initialize search all select.select2 elements in DOM and initialized its all.