Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[FUEL CMS - Use Select2 with Ajax Options] #php #FuelCMS
<?php
// fuel/application/config/custom_fields.php
/*
|--------------------------------------------------------------------------
| Form builder
|--------------------------------------------------------------------------
|
| Specify field types and other Form_builder configuration properties
| This file is included by the fuel/modules/fuel/config/form_builder.php file
*/
$fields['my_custom_field'] = [];
// Select2 Ajax field
$fields['select2_ajax'] = [
'class' => [FUEL_FOLDER => 'Form_builder'],
// create a hidden field instead of a <select>, because the docs say so:
// @see https://select2.github.io/select2/#data
// this is only true for select2 v3.x
// @see https://stackoverflow.com/a/16345339/814031
'function' => 'create_hidden',
'js' => [
FUEL_FOLDER => [
'jquery/plugins/select2.min',
// custom field init code!
'fuel/my_custom_fields.js'
],
],
'js_exec_order' => 1,
'js_function' => 'fuel.fields.select2_ajax',
'js_params' => [
'foo' => 'bar',
'width' => '80%',
'ajax' => [
// Needs the following method: Datastore_model::ajax_get_datastore()
// See https://docs.getfuelcms.com/general/javascript#ajax
'url' => fuel_url('datastore/ajax/get_datastore'),
'dataType' => 'json',
],
],
'css' => [
FUEL_FOLDER => [
'select2',
],
],
];
$fields['select2_ajax']['class'] = [FUEL_FOLDER => 'Fuel_custom_fields'];
$fields['select2_ajax']['function'] = 'select2';
$fields['select2_ajax']['js_function'] = 'fuel.fields.select2v4_ajax';
$fields['select2_ajax']['js'] = [
'https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js',
FUEL_FOLDER => [
'fuel/my_custom_fields.js'
],
];
$fields['select2_ajax']['css'] = 'https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css';
include(FUEL_PATH . 'config/custom_fields.php');
// Overwrite Select2 field to use v4 from a cdn
$fields['select2'] = [
'class' => [FUEL_FOLDER => 'Fuel_custom_fields'],
'function' => 'select2',
// 'js' => [
// FUEL_FOLDER => [
// 'jquery/plugins/select2.min',
// ],
// ],
'js' => 'https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js',
'js_exec_order' => 1,
'js_function' => 'fuel.fields.select2',
// 'css' => [
// FUEL_FOLDER => [
// 'select2',
// ],
// ],
'css' => 'https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css'
];
/* End of file form_builder.php */
/* Location: ./application/config/form_builder.php */
<?php
class Custom_model extends Base_module_model
{
function form_fields($values = [], $related = [])
{
$fields = parent::form_fields($values, $related);
$fields['key'] = [
'type' => 'select2_ajax',
'class' => 'select2_ajax', // the selector in fuel.fields.select2_ajax
'style' => 'width: 300px', // set an initial width
'first_option' => '',
'module' => 'datastore',
'model' => 'datastore',
'model_params' => ['key', 'key_name_de'],
];
// etc
}
}
<?php
class Datastore_model extends Base_module_model
{
public function ajax_get_datastore($params)
{
// create select2 data structure right here.
$this->db->select('`key` AS id, key_name_de AS text', false);
$this->db->like('key_name_de', $this->input->get('q'));
$results['results'] = (array) $this->find_all_array();
return json_encode($results);
}
}
// /fuel/modules/fuel/assets/js/fuel/my_custom_fields.js
fuel.fields.select2_ajax = function(context, options){
var init = {
placeholder: "Search for a repository",
minimumInputLength: 1,
dataType: 'json',
ajax: {
url: '',
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
q: term, // search term
};
},
results: function (data, page) {
// parse the results into the format expected by Select2.
// data.results = [
// {id: 2, text: 'Option 1'},
// {id: 3, text: 'Option 12'},
// ]
// since we are using custom formatting functions we do not need to alter the remote JSON data
return data;
},
cache: true
},
// write entry if not exist
createSearchChoice: function(term, data) {
if (!data.length){
// $.ajax to create entry
// add entry to list
return { id: term, text: term };
}
},
// todo.
initSelection: function(element, callback) {
// the input tag has a value attribute preloaded that points to a preselected repository's id
// this function resolves that id attribute to an object that select2 can render
// using its formatResult renderer - that way the repository name is shown preselected
//var id = $(element).val();
//if (id !== "") {
// $.ajax("https://api.github.com/repositories/" + id, {
// dataType: "json"
// }).done(function(data) { callback(data); });
//}
},
}
if (options){
var options = $.extend(true, init, options);
} else {
options = {};
}
console.log('select2_ajax', init, options);
$('.select2_ajax_applied', context).select2('destroy').removeClass('select2_ajax_applied');
$('.select2_ajax', context).addClass('select2_ajax_applied').select2(options);
fuel.fields.inline_edit_field();
}
/**
* Select2 v4
*/
fuel.fields.select2v4_ajax = function(context, options){
var init = {
placeholder: "Search for a repository",
minimumInputLength: 1,
dataType: 'json',
ajax: {
url: '',
dataType: 'json',
quietMillis: 250,
//data: function (term, page) {
// return {
// q: term, // search term
// };
//},
//results: function (data, page) {
// // parse the results into the format expected by Select2.
// // data.results = [
// // {id: 2, text: 'Option 1'},
// // {id: 3, text: 'Option 12'},
// // ]
// // since we are using custom formatting functions we do not need to alter the remote JSON data
// return data;
//},
cache: true
},
// write entry if not exist
// @see https://stackoverflow.com/a/55247654/814031
createSearchChoice: function(term, data) {
if (!data.length){
// $.ajax to create entry
// add entry to list
return { id: term, text: term };
}
}
}
if (options){
var options = $.extend(true, init, options);
} else {
options = {};
}
console.log('select2_ajax', init, options,context);
if($('.select2_ajax_applied', context).length)
$('.select2_ajax_applied', context).select2('destroy').removeClass('select2_ajax_applied');
$('.select2_ajax', context).addClass('select2_ajax_applied').select2(options);
fuel.fields.inline_edit_field();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment