kartik-v / yii2-widgets

Collection of useful widgets for Yii Framework 2.0
http://demos.krajee.com/widgets
Other
558 stars 175 forks source link

Error when want to clear selection in Select2 widget #378

Open mavelar opened 5 years ago

mavelar commented 5 years ago

My current code is like this:

<?=$form->field($model,'customer_id')->widget(Select2::classname(), [ 'data' => ArrayHelper::map($customer,'id','customer_name'), 'theme' => 'bootstrap', 'options' => [ 'placeholder' => Yii::t('app','Select customer...'), ], 'pluginOptions' => [ 'allowClear' => true ], ])->label(Yii::t('app','Customer'));?>

As you can see allowClear is set true, but when I try to clear my selection a javascript error is trigger:

TypeError: $el.data(...) is undefined

And refer to line 91

initS2Unselect = function () { var $el = $(this), opts = $el.data('select2').options; opts.set('disabled', true); setTimeout(function() { opts.set('disabled', false); $el.trigger('krajeeselect2:cleared'); }, 1); };

Another to add to this post, is that this form is an ajax call:

Sketch

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/90606104-error-when-want-to-clear-selection-in-select2-widget?utm_campaign=plugin&utm_content=tracker%2F530581&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F530581&utm_medium=issues&utm_source=github).
Lachee commented 4 years ago

I have the same issue, however it is Cannot read property 'id' of undefined instead. failure

I am using it as a filter with the gridview:

[
            'attribute'         => 'repairer.name',
            'label'             => 'Repairer',
            'filterType'        => GridView::FILTER_SELECT2,
            'filterWidgetOptions'   => [
                'pluginOptions' => [
                    'allowClear' => true,
                    'ajax' => [
                        'url' => Url::to(['/contact/list', 'mode' => 'repairer']),
                        'dataType' => 'json',
                        'delay'=> 10,              
                        'data' => new JsExpression('function(params) { return { q: params.term, page: params.page}; }'),
                        'cache' => true
                    ]
                ]
            ]
        ],

My solution was to add a placeholder. This seems to have fixed it:

  'options' => ['placeholder' => ''],