selectize ajax - selectize ajax

selectize ajax

Otras categorias

Stable release

Descargar

Seleccionar::Ajax

Útil etiqueta de control de formulario Selectize.js con autocompletar, creación y edición de elementos mediante ajax.

Instalación

Agregue esta línea al Gemfile de su aplicación:

 gem 'selectize-ajax'

Y luego ejecuta:

 $ bundle

O instálelo usted mismo como:

 $ gem install selectize-ajax

En su application.js, incluya lo siguiente:

 //= require selectize-ajax

En su application.css, incluya lo siguiente:

 *= require selectize-ajax

Uso

Por ejemplo, desea crear un control desplegable para elegir la categoría de publicación.

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

Este código genera un menú desplegable de selección simple. La colección debe ser la siguiente:

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

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

Autocompletar

Para usar el autocompletado ajax debes agregar la ruta para la búsqueda:

 selectize_ajax_tag f . object , :category_id , collection_path : categories_autocomplete_path

De forma predeterminada, el parámetro de búsqueda es q , si desea utilizar otro parámetro, debe configurar search_param para el control.

Agregar nuevo elemento

Puede agregar un nuevo elemento desde la ventana modal. Para esto necesitas:

Agregue ruta y destino modal para seleccionar el control
Crear modal y acción en el controlador.

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

Ventana modal de arranque

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

La acción del controlador después de crear con éxito un nuevo registro debería devolver json:

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

Después de eso, el modal se cerrará y el nuevo registro se seleccionará en el menú desplegable.

Editar elemento seleccionado

Para editar el elemento seleccionado, debe agregar un nuevo modal y editar la ruta de acción.

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

ADVERTENCIA : si desea usar edit_path y no tiene una identificación de registro para generar la ruta del enlace, necesita usar las siguientes plantillas:

Reemplace ID con la cadena {{id}} - edit_category_path(id: '{{id}}')
O utilice edit_category_path(id: f.object.category_id || '{{id}}')
O escriba una ruta codificada sin rieles hepler '/category/{{id}}/edit' (no recomendado)

El script reemplazará automáticamente el parámetro {{id}} con el valor seleccionado.

Todas las opciones

Parámetro	Valores	Por defecto
`label`	cadena	Del objeto
`value`	mezclado	Del objeto
`placeholder`	cadena	--
`wrap_class`	cadena \| FALSO	--
`wrap_class_only`	verdadero \| FALSO	FALSO
`label_class`	cadena	--
`input_html[class]`	cadena	--
`required`	verdadero \| FALSO	Del objeto
`collection`	formación	[]
`add_modal`	cadena	--
`add_path`	cadena	--
`add_button_text`	cadena	I18n.t('selectize_ajax.add_button_text')
`add_button_class`	cadena	--
`edit_path`	cadena	--
`edit_modal`	cadena	--
`edit_button_text`	cadena	I18n.t('selectize_ajax.edit_button_text')
`edit_button_class`	cadena	--
`horizontal`	verdadero \| FALSO	verdadero
`collection_path`	cadena	--
`search_param`	cadena	`q`