Как отправлять id, а не value в форме с Select2?

Question

[Максим Филиппов]

Есть приложение на Ruby on Rails, где можно на странице редактирования поста задать посту страну, вот код input'a (использую simple form):

= f.input :country, label: t("heading.country"), as: :string, input_html: { class: 'select2', data: { allowadd: true, depth: 0, id: post.location.country.id, url: search_locations_path } }

В CoffeeScript'e я подключаю select2

loadSelect2 = (selector = '.select2') ->
  $(@).select2
    ajax:
      data: (term, page) ->
        search: term
        depth: $(@).data('depth')
      results: (data, page) ->
        results: data
      url: $(@).data('url')
    createSearchChoice: (term, data) ->
      if $(data).filter(->
        @title.localeCompare(term) is 0
      ).length is 0
        id: term
        title: term
    createSearchChoicePosition: 'bottom'
    formatResult: (item) ->
      item.title
    formatSelection: (item) ->
      item.title
    initSelection: (element, callback) ->
      callback
        id: $(element).data('id')
        title: $(element).val()

То же самое, но в ванильном:

var loadSelect2;

loadSelect2 = function(selector) {
  if (selector == null) {
    selector = '.select2';
  }
  return $(this).select2({
    ajax: {
      data: function(term, page) {
        return {
          search: term,
          depth: $(this).data('depth')
        };
      },
      results: function(data, page) {
        return {
          results: data
        };
      },
      url: $(this).data('url')
    },
    createSearchChoice: function(term, data) {
      if ($(data).filter(function() {
        return this.title.localeCompare(term) === 0;
      }).length === 0) {
        return {
          id: term,
          title: term
        };
      }
    },
    createSearchChoicePosition: 'bottom',
    formatResult: function(item) {
      return item.title;
    },
    formatSelection: function(item) {
      return item.title;
    },
    initSelection: function(element, callback) {
      return callback({
        id: $(element).data('id'),
        title: $(element).val()
      });
    }
  });
};

Так, я могу выбрать страну из списка или добавить вручную, если в списке нет вариантов. Начальные значения я получаю из val() input'a и data-id input'a, это описывается в функции initSelection.

Если я выберу какую-либо страну из списка и отправлю форму, то всё работает как задумывалось: в переменной post_params['country'] оказывается id, то есть число. Если же я отправлю форму не меняя выбора страны, то вместо id я получаю value выбранной по умолчанию страны, а нужно id.

Что я делаю не так и как исправить?

Answer 1

[Сергей]

Сейчас стал использовать gem "select2-rails"
Есть презентация на Хабрахабр - Как мы Select2 в хелпер заворачивали
Очень удобно, есть документация с примерами.

Comments

[Максим Филиппов]

Мне подсказали правильное решение на stackoverflow, его публикую ниже. На этот гем наткнулся на хабре неделю назад, там пока нет нужной мне возможности — создания своих значений в списке, поэтому пока его не использую, но попробую сам в него это дописать. Ваш ответ помечу как решение, чтобы привлечь внимание к классному гему, только он называется AutoSelect2.

Answer 2

[vsuhachev]

В значении инпута должен быть изначально id. У вас видимо есть Country#to_s и туда рендерится название.

= f.input :country_id
либо

= f.input :country, input_html: { value:  post.location.country.id }

Comments

[Максим Филиппов]

В таком случае я в инпуте и вижу id при загрузке страницы, как видеть value?

[vsuhachev]

Попробуйте тэг select вместо input
= f.input :country, as: :select

[Максим Филиппов]

vsuhachev: не получится. Мне нужно иметь возможность использовать функцию createSearchChoice для создания новых позиций в списке стран (если их там нет), а это можно делать только на input type="text"

[vsuhachev]

Ну тогда варианты:
1) hidden input, у вас же все равно в контроллере какая-то своя хитрая логика работы с country?
2) нажимайте на select2-контрол программно после инициализации

А вообще конечно странно. По уму initSelection как раз и должен все решать. Попоробуйте переписать его так как в доках, то есть через использование переменной

var data = { id: $(element).data('id'), text: $(element).val() }
callback(data)

Возможно в этом проблема (я не большой знаток js, могу ошибаться конечно)

Answer 3

[Максим Филиппов]

Ответ такой:

= f.input :country, 
               label: t("heading.country"), 
               as: :string, 
               input_html: { value: @post.location.country.id, 
                                    class: 'select2', 
                                    data: { allowadd: true, 
                                               depth: 0, 
                                               title: @post.location.country.title, 
                                               url: search_locations_path } }

initSelection: (element, callback) ->
      callback
        id: $(element).val(),
        title: $(element).data('title')

Answer 4

[Сергей Мельников]

Зря вы используете CoffeeScript, так количество людей, готовых вам помочь, резко снижается

Comments

[Максим Филиппов]

Неужели отсутсвие фигурных и круглых скобок является проблемой для понимания?

[Сергей Мельников]

colix: да, является проблемой (для меня это как обфусцированныйjs)

[Максим Филиппов]

Сергей Мельников: Значит вы вряд ли мне поможете, всего хорошего

[Сергей Мельников]

colix: интересно, поможет ли вам вообще кто-то на toster.ru)

[Максим Филиппов]

Сергей Мельников: добрался до компьютера и добавил в вопрос скомпилированный в js код