selectize ajax

selectize ajax

Andere Kategorien

Stable release

Herunterladen

Selectize::Ajax

Nützliches Selectize.js-Formularsteuerungs-Tag mit automatischer Vervollständigung, Erstellen und Bearbeiten von Elementen per Ajax.

Installation

Fügen Sie diese Zeile zur Gemfile Ihrer Anwendung hinzu:

 gem 'selectize-ajax'

Und dann ausführen:

 $ bundle

Oder installieren Sie es selbst als:

 $ gem install selectize-ajax

Fügen Sie in Ihre application.js Folgendes ein:

 //= require selectize-ajax

Fügen Sie in Ihre application.css Folgendes ein:

 *= require selectize-ajax

Verwendung

Sie möchten beispielsweise ein Dropdown-Steuerelement für die Auswahl der Beitragskategorie erstellen

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

Dieser Code generiert ein einfaches Auswahl-Dropdown. Die Sammlung sollte wie folgt aussehen:

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

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

Automatische Vervollständigung

Für die Verwendung der Ajax-Autovervollständigung müssen Sie einen Suchpfad hinzufügen:

 selectize_ajax_tag f . object , :category_id , collection_path : categories_autocomplete_path

Standardmäßig ist der Suchparameter q . Wenn Sie einen anderen Parameter verwenden möchten, müssen Sie search_param zur Steuerung festlegen.

Neues Element hinzufügen

Sie können ein neues Element aus dem modalen Fenster hinzufügen. Dafür benötigen Sie:

Fügen Sie einen Pfad und ein modales Ziel hinzu, um die Steuerung auszuwählen
Modal und Aktion auf dem Controller erstellen

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

Modales Bootstrap-Fenster

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

Die Controller-Aktion sollte nach erfolgreicher Erstellung eines neuen Datensatzes json zurückgeben:

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

Danach wird das Modal geschlossen und der neue Datensatz wird im Dropdown-Menü ausgewählt.

Ausgewähltes Element bearbeiten

Um das ausgewählte Element zu bearbeiten, sollten Sie ein neues Modal hinzufügen und den Aktionspfad bearbeiten.

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

WARNUNG : Wenn Sie edit_path verwenden möchten und keine Datensatz-ID zum Generieren des Linkpfads haben, müssen Sie die folgenden Vorlagen verwenden:

Ersetzen Sie die ID durch die Zeichenfolge {{id}} – edit_category_path(id: '{{id}}')
Oder verwenden Sie edit_category_path(id: f.object.category_id || '{{id}}')
Oder schreiben Sie einen fest codierten Pfad ohne Schienen-Hepler '/category/{{id}}/edit' (nicht empfohlen).

Das Skript ersetzt automatisch den Parameter {{id}} durch den ausgewählten Wert.

Alle Optionen

Parameter	Werte	Standard
`label`	Zeichenfolge	Vom Objekt
`value`	gemischt	Vom Objekt
`placeholder`	Zeichenfolge	--
`wrap_class`	Zeichenfolge \| FALSCH	--
`wrap_class_only`	wahr \| FALSCH	FALSCH
`label_class`	Zeichenfolge	--
`input_html[class]`	Zeichenfolge	--
`required`	wahr \| FALSCH	Vom Objekt
`collection`	Array	[]
`add_modal`	Zeichenfolge	--
`add_path`	Zeichenfolge	--
`add_button_text`	Zeichenfolge	I18n.t('selectize_ajax.add_button_text')
`add_button_class`	Zeichenfolge	--
`edit_path`	Zeichenfolge	--
`edit_modal`	Zeichenfolge	--
`edit_button_text`	Zeichenfolge	I18n.t('selectize_ajax.edit_button_text')
`edit_button_class`	Zeichenfolge	--
`horizontal`	wahr \| FALSCH	WAHR
`collection_path`	Zeichenfolge	--
`search_param`	Zeichenfolge	`q`