Yii2 - Set value for Select2 plugin with Ajax Loading

Question

i've some troubles with Select2 kartik plugin for yii2. I set up my plugin with Ajax Loading and, in my create view works fine, so i can select multiple value and save it on database.

When i show the update view i want to set visible the value that i've saved in my database but it show me only a gray rectangle with x icon.

This is what i've tried.

echo $form->field($model, 'lista_art')->widget(Select2::classname(), [
    'initValueText' => $art_list,// array of text to show in the tag for the selected items 
    'showToggleAll' => false,
    'options' => ['placeholder' => 'Select...',
                  'multiple' =>true,
                  'value' => $value, // array of Id of the selected items
                 ],
    'pluginOptions' => [
        'tags' => true,
        'tokenSeparators' => [',', ' '],
        'allowClear' => true,
        'minimumInputLength' => 3,
        'language' => [
            'errorLoading' => new JsExpression("function () { return 'Waiting for results...'; }"),
        ],
        'ajax' => [
            'url' => \yii\helpers\Url::to(['lista-articoli']),
            'dataType' => 'json',
            'data' => new JsExpression('function(params) { return {q:params.term}; }')
        ],
        'escapeMarkup' => new JsExpression('function (markup) { console.log(markup);return markup; }'),
        'templateResult' => new JsExpression('function(lista_art) { return lista_art.art_modello; }'),
        'templateSelection' => new JsExpression('function (lista_art) { return lista_art.art_modello; }'),
    ],
]);

And this is the result.

$art_list and $value are array's like this

$art_list = ['name1','name2'];
$value= ['id_name1','id_name2'];

If i inspect the code with browser inspector i find this

<li class="select2-selection__choice" title="name1">
    <span class="select2-selection__choice__remove" role="presentation">×</span>
</li>

UPDATE I'll find the error, and it is very trivial.. The error is here

 'templateResult' => new JsExpression('function(lista_art) { return lista_art.art_modello; }'),
 'templateSelection' => new JsExpression('function (lista_art) { return lista_art.art_modello; }')

There is no lista_art.art_modello because the object for this element is inthe format id:id_name1 and text:name1 so changing the code like this it will work

'templateResult' => new JsExpression('function(lista_art) { return lista_art.text; }'),
'templateSelection' => new JsExpression('function (lista_art) { return lista_art.text; }')

Try to do `$value = ['id_name1' => 'name1', 'id_name2' => 'name2'];` Not sure will it work, but just an idea. Also, try moving `'value' => $value` out of `'options'` array — AwesomeGuy, Sep 18 '18 at 13:39
you can't display array on select2, $art_list should be string rather than array. then it will work — Gvep, Sep 18 '18 at 14:32

score 2 · Accepted Answer · answered Oct 03 '18 at 12:45

Hi guys thanks for responding me. I found a solution for my problem and i'll post an answer for anyone who get same problem.

This is my Select2 Field in my view:

echo $form->field($model, 'lista_art')->widget(Select2::classname(), [
    'initValueText' => $art_list,// array of text to show in the tag for the selected items 
    'showToggleAll' => false,
    'options' => ['placeholder' => 'Seleziona un prodotto',
                  //'tags' => true,
                  'multiple' =>true,
                  'value' => $value, // array of Id of the selected items
                  'class' => 'validatej'
                 ],
    'pluginOptions' => [
        'tags' => true,
        'tokenSeparators' => [',' , ' '],
        'allowClear' => true,
        'minimumInputLength' => 3,
        'language' => [
            'errorLoading' => new JsExpression("function () { return 'Waiting for results...'; }"),
        ],
        'ajax' => [
            'url' => \yii\helpers\Url::to(['lista-articoli']),
            'dataType' => 'json',
            'data' => new JsExpression('function(params) {return {q:params.term}; }')
        ],
        'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
        'templateResult' => new JsExpression('function(data) {return data.text; }'),
        'templateSelection' => new JsExpression('function (data) {  return data.text; }'),
    ],
]);

The problem isn't here but in the function called by ajax

public function actionGetArt($q = null, $id = null) {
        \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;//restituisco json
        $out = ['results' => ['id' => '', 'text' => '']];
        if (!is_null($q)) {
            $query = new Query;
            $query->select('art_cod AS id, art_modello AS text') 
                  ->from('art')
                  ->where(['ilike', 'art_modello', $q]);
            $command = $query->createCommand();
            $data = $command->queryAll();
            $out['results'] = array_values($data);
        }
        elseif ($id > 0) {
            $out['results'] = ['id' => $id, 'text' => Catalogo::find($id)->art_modello];
        }

        return $out;
    }

In the line where i call select Sql

$query->select('art_cod AS id, art_modello AS text')

you have to set your id table an your text table(in my case art_modello) AS id and AS text accordly with the select2 widget. This is not specified in the docs so i'll have read the code and found this solution.

score 0 · Answer 2 · answered Sep 18 '18 at 15:19

0

You can't set initValueText as an array. See docs:

initValueText: string, the text to displayed in Select2 widget for the initial value. This is useful and applicable when you are using the widget with ajax loaded data AND/OR you are not providing the data. Check the ajax usage section for an example.

'initValueText' => $art_text, // set the initial display text

Use data instead:

'data' => $art_list,

answered Sep 18 '18 at 15:19

Imtiaz

2,484
2
26
32

Tnx for the answer. But i'm using AJAX so data is not useful here according to the docs? So if i have multiple preselected data, how i can show them? – Sfili_81 Sep 18 '18 at 15:25
P.S. i I use data i don't see nothing – Sfili_81 Sep 18 '18 at 15:27
you also have to map data [id => title] when use it – Sr1871 Sep 18 '18 at 16:01
yes, that's right. the array has to be key => value pair – Imtiaz Sep 18 '18 at 16:49
Okay, I'll try to find a solution for you. Thanks for your patience. – Imtiaz Sep 19 '18 at 09:04

Yii2 - Set value for Select2 plugin with Ajax Loading

2 Answers2