selectize ajax Download - selectize ajax Téléchargement du code source

selectize ajax

Autres catégories

Stable release

Télécharger

Sélectionner ::Ajax

Balise de contrôle de formulaire Selectize.js utile avec saisie semi-automatique, création et modification d'éléments par ajax.

Installation

Ajoutez cette ligne au Gemfile de votre application :

 gem 'selectize-ajax'

Et puis exécutez :

 $ bundle

Ou installez-le vous-même en tant que :

 $ gem install selectize-ajax

Dans votre application.js, incluez les éléments suivants :

 //= require selectize-ajax

Dans votre application.css, incluez les éléments suivants :

 *= require selectize-ajax

Usage

Par exemple, vous souhaitez créer un contrôle déroulant pour choisir la catégorie de publication

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

Ce code génère une liste déroulante de sélection simple. La collection doit être la suivante :

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

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

Saisie semi-automatique

Pour utiliser la saisie semi-automatique ajax, vous devez ajouter un chemin de recherche :

 selectize_ajax_tag f . object , :category_id , collection_path : categories_autocomplete_path

Par défaut, le paramètre de recherche est q , si vous souhaitez utiliser un autre paramètre, vous devez définir search_param pour le contrôle.

Ajouter un nouvel élément

Vous pouvez ajouter un nouvel élément à partir de la fenêtre modale. Pour cela il vous faut :

Ajouter un chemin et une cible modale pour sélectionner le contrôle
Créer un modal et une action sur le contrôleur

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

Fenêtre modale 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|
  ...

L'action du contrôleur après la création réussie d'un nouvel enregistrement doit renvoyer json :

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

Après cela, le modal se fermera et le nouvel enregistrement sera sélectionné dans la liste déroulante.

Modifier l'élément sélectionné

Pour modifier l'élément sélectionné, vous devez ajouter un nouveau chemin d'action modal et modifier.

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

AVERTISSEMENT : si vous souhaitez utiliser edit_path et que vous n'avez pas d'identifiant d'enregistrement pour générer le chemin du lien, vous devez utiliser les modèles suivants :

Remplacez l'ID par la chaîne {{id}} - edit_category_path(id: '{{id}}')
Ou utilisez edit_category_path(id: f.object.category_id || '{{id}}')
Ou écrivez un chemin codé en dur sans rails hepler '/category/{{id}}/edit' (non recommandé)

Le script remplacera automatiquement le paramètre {{id}} par la valeur sélectionnée.

Toutes les options

Paramètre	Valeurs	Défaut
`label`	chaîne	De l'objet
`value`	mixte	De l'objet
`placeholder`	chaîne	--
`wrap_class`	chaîne \| FAUX	--
`wrap_class_only`	vrai \| FAUX	FAUX
`label_class`	chaîne	--
`input_html[class]`	chaîne	--
`required`	vrai \| FAUX	De l'objet
`collection`	tableau	[]
`add_modal`	chaîne	--
`add_path`	chaîne	--
`add_button_text`	chaîne	I18n.t('selectize_ajax.add_button_text')
`add_button_class`	chaîne	--
`edit_path`	chaîne	--
`edit_modal`	chaîne	--
`edit_button_text`	chaîne	I18n.t('selectize_ajax.edit_button_text')
`edit_button_class`	chaîne	--
`horizontal`	vrai \| FAUX	vrai
`collection_path`	chaîne	--
`search_param`	chaîne	`q`