Загрузить selectize ajax - Загрузить исходный код selectize ajax

selectize ajax

Другие категории

Stable release

Скачать

Выберите::Ajax

Полезный тег управления формой Selectize.js с автозаполнением, созданием и редактированием элементов с помощью ajax.

Установка

Добавьте эту строку в Gemfile вашего приложения:

 gem 'selectize-ajax'

И затем выполните:

 $ bundle

Или установите его самостоятельно как:

 $ gem install selectize-ajax

В свой application.js включите следующее:

 //= require selectize-ajax

В файле application.css включите следующее:

 *= require selectize-ajax

Использование

Например, вы хотите создать раскрывающийся список для выбора категории сообщений.

 selectize_ajax_tag f . object , :category_id , collection : Category . collection

Этот код генерирует простой раскрывающийся список выбора. Коллекция должна быть следующей:

 [
  ...
  { value : < id > , label : < title > } ,
  ...
]

 def self . collection
  Category . map do | category |
    { label : category . title , value : category . id }
  end
end

Автозаполнение

Для использования автозаполнения ajax необходимо добавить путь для поиска:

 selectize_ajax_tag f . object , :category_id , collection_path : categories_autocomplete_path

По умолчанию параметр поиска — q . Если вы хотите использовать другой параметр, вам нужно установить search_param для управления.

Добавить новый элемент

Вы можете добавить новый элемент из модального окна. Для этого вам нужно:

Добавьте путь и модальную цель, чтобы выбрать элемент управления.
Создать модальное окно и действие на контроллере

<%= selectize_ajax_tag f . object , :category_id ,
    collection : Category . collection ,
    add_path : new_category_path ,
    add_modal : '#new-category-modal'
%>

Модальное окно Bootstrap

  ...
  .modal-header
    % h4 .modal-title
      Create new category

  .modal-body
    = simple_form_for(@category_form, url: categories_path ,
      data: { target: '#new-category-modal' }, remote: true) do |f|
  ...

Действие контроллера после успешного создания новой записи должно возвращать json:

 def create
  ...
  render json : { label : record . title , value : record . id }
end

После этого модальное окно закроется, и в раскрывающемся списке будет выбрана новая запись.

Изменить выбранный элемент

Для редактирования выбранного элемента вам следует добавить новое модальное окно и отредактировать путь действия.

<%= selectize_ajax_tag f . object , :category_id ,
    collection : Category . collection ,
    add_path : new_category_path ,
    add_modal : '#new-category-modal' ,
    edit_path : edit_category_path ( @category ) ,
    edit_modal : '#edit-category-modal'
%>

ВНИМАНИЕ : если вы хотите использовать edit_path и у вас нет идентификатора записи для создания пути ссылки, вам необходимо использовать следующие шаблоны:

Заменить идентификатор на строку {{id}} - edit_category_path(id: '{{id}}')
Или используйте edit_category_path(id: f.object.category_id || '{{id}}')
Или напишите жестко закодированный путь без рельсов hepler '/category/{{id}}/edit' (не рекомендуется)

Скрипт автоматически заменит параметр {{id}} на выбранное значение.

Все варианты

Параметр	Ценности	По умолчанию
`label`	нить	С объекта
`value`	смешанный	С объекта
`placeholder`	нить	--
`wrap_class`	строка \| ЛОЖЬ	--
`wrap_class_only`	правда \| ЛОЖЬ	ЛОЖЬ
`label_class`	нить	--
`input_html[class]`	нить	--
`required`	правда \| ЛОЖЬ	С объекта
`collection`	множество	[]
`add_modal`	нить	--
`add_path`	нить	--
`add_button_text`	нить	I18n.t('selectize_ajax.add_button_text')
`add_button_class`	нить	--
`edit_path`	нить	--
`edit_modal`	нить	--
`edit_button_text`	нить	I18n.t('selectize_ajax.edit_button_text')
`edit_button_class`	нить	--
`horizontal`	правда \| ЛОЖЬ	истинный
`collection_path`	нить	--
`search_param`	нить	`q`