selectize ajax - selectize ajax

selectize ajax

Outras categorias

Stable release

Baixar

Selecione::Ajax

Tag útil de controle de formulário Selectize.js com preenchimento automático, criação e edição de itens por ajax.

Instalação

Adicione esta linha ao Gemfile da sua aplicação:

 gem 'selectize-ajax'

E então execute:

 $ bundle

Ou instale você mesmo como:

 $ gem install selectize-ajax

Em seu application.js, inclua o seguinte:

 //= require selectize-ajax

Em seu application.css, inclua o seguinte:

 *= require selectize-ajax

Uso

Por exemplo, você deseja criar um controle suspenso para escolher a categoria da postagem

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

Este código gera um menu suspenso de seleção simples. A coleção deverá ser a seguinte:

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

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

Preenchimento automático

Para usar o preenchimento automático do ajax você deve adicionar o caminho para pesquisa:

 selectize_ajax_tag f . object , :category_id , collection_path : categories_autocomplete_path

Por padrão, o parâmetro de pesquisa é q , se você quiser usar outro parâmetro, você precisa definir search_param para controle.

Adicionar novo item

Você pode adicionar um novo item na janela modal. Para isso você precisa de:

Adicione caminho e destino modal para selecionar o controle
Crie modal e ação no controlador

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

Janela modal de inicialização

  ...
  .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|
  ...

A ação do controlador após a criação bem-sucedida do novo registro deve retornar json:

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

Depois disso, o modal será fechado e o novo registro será selecionado no menu suspenso.

Editar item selecionado

Para editar o item selecionado, você deve adicionar um novo modal e editar o caminho da ação.

<%= 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'
%>

AVISO : se você deseja usar edit_path e não possui o ID do registro para gerar o caminho do link, você precisa usar os seguintes modelos:

Substitua o ID pela string {{id}} - edit_category_path(id: '{{id}}')
Ou use edit_category_path(id: f.object.category_id || '{{id}}')
Ou escreva o caminho codificado sem Rails hepler '/category/{{id}}/edit' (não recomendado)

O script substituirá automaticamente o parâmetro {{id}} pelo valor selecionado.

Todas as opções

Parâmetro	Valores	Padrão
`label`	corda	Do objeto
`value`	misturado	Do objeto
`placeholder`	corda	--
`wrap_class`	corda \| falso	--
`wrap_class_only`	verdade \| falso	falso
`label_class`	corda	--
`input_html[class]`	corda	--
`required`	verdade \| falso	Do objeto
`collection`	variedade	[]
`add_modal`	corda	--
`add_path`	corda	--
`add_button_text`	corda	I18n.t('selectize_ajax.add_button_text')
`add_button_class`	corda	--
`edit_path`	corda	--
`edit_modal`	corda	--
`edit_button_text`	corda	I18n.t('selectize_ajax.edit_button_text')
`edit_button_class`	corda	--
`horizontal`	verdade \| falso	verdadeiro
`collection_path`	corda	--
`search_param`	corda	`q`