karatik select 2 within dynamic form

I’m trying to implement a kartik select2 in a dynamic form, but when i use karktik-Select2 , it stays loading and don’t show the widget but if i use a dropdown it work fine, but i need to use Select2, I really need this extension in my project requirements,

please give me some advice…

this is my action create


    public function actionCreate() {

        $model = new Semester();

        $modelsMataPelajaran = [new MataPelajaran];

        if ($model->load(Yii::$app->request->post())) {

            //jika ada semester yang aktif atau berjalan action create tidak dapat dilakukan;

            if (Semester::find()->where(['status' => "aktif"])->count() == 0) {

                $tahunAjaran = TahunAjaran::find()->where(['status' => "aktif"])->one();

                $model->save();

                $modelsMataPelajaran = Model::createMultiple(MataPelajaran::classname(), $modelsMataPelajaran);

                Model::loadMultiple($modelsMataPelajaran, Yii::$app->request->post());


                // validate all models

                $model->id_tahun_ajaran = $tahunAjaran->id;

                $valid = $model->validate();

                $valid = Model::validateMultiple($modelsMataPelajaran) && $valid;

                echo 'semua model divalidasi<br>';

                if ($valid) {

                    $transaction = \Yii::$app->db->beginTransaction();

                    try {

                        if ($flag = $model->save(false)) {

                            foreach ($modelsMataPelajaran as $modelMataPelajaran) {

                                $modelMataPelajaran->id_semester = $model->id;

                                if (!($modelMataPelajaran->save(false))) {

                                    $transaction->rollBack();

                                    echo 'mata pelajaran gagal disave<br>';

                                    die();

                                    break;

                                }

                                echo 'semester di entri<br>';

                            }

                        }

                        if ($flag) {

                            $transaction->commit();

                            return $this->redirect(['view', 'id' => $model->id]);

                        }

                    } catch (Exception $e) {

                        $transaction->rollBack();

                        echo 'semester gagal disave<br>';

                        die();

                    }

                }

                die();

                return $this->redirect(['view', 'id' => $model->id]);

            } else {

                return $this->render('create', [

                            'model' => $model,

                            'modelsMataPelajaran' => (empty($modelsMataPelajaran)) ? [new MataPelajaran] : $modelsMataPelajaran

                ]);

            }

        } else {

            return $this->render('create', [

                        'model' => $model,

                        'modelsMataPelajaran' => (empty($modelsMataPelajaran)) ? [new MataPelajaran] : $modelsMataPelajaran

            ]);

        }

    }



and this is my view


<div class="semester-form">


    <?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>


    <?= $form->field($model, 'semester')->dropDownList([ 'Ganjil' => 'Ganjil', 'Genap' => 'Genap',], ['prompt' => '']) ?>


    <?= $form->field($model, 'keterangan')->textInput(['maxlength' => true]) ?>


    <?= $form->field($model, 'status')->dropDownList([ 'aktif' => 'Aktif', 'nonaktif' => 'Nonaktif',], ['prompt' => '']) ?>


    <div class="row">

        <div class="panel panel-default">

            <div class="panel-heading"><h4><i class="glyphicon glyphicon-envelope"></i>Mata Pelajaran</h4></div>

            <div class="panel-body">

                <?php

                $guru = ArrayHelper::map(Guru::find()->where(['status_aktif' => 1])->all(), 'nip', 'nama');

                DynamicFormWidget::begin([

                    'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]

                    'widgetBody' => '.container-items', // required: css class selector

                    'widgetItem' => '.item', // required: css class

                    'limit' => 50, // the maximum times, an element can be cloned (default 999)

                    'min' => 1, // 0 or 1 (default 1)

                    'insertButton' => '.add-item', // css class

                    'deleteButton' => '.remove-item', // css class

                    'model' => $modelsMataPelajaran[0],

                    'formId' => 'dynamic-form',

                    'formFields' => [

                        'nip_guru',

                        'nama',

                        'kelas',

                        'jurusan',

                        'kkm',

                        'keterangan',

                    ],

                ]);

                ?>


                <div class="container-items"><!-- widgetContainer -->

<?php foreach ($modelsMataPelajaran as $i => $modelMataPelajaran): $model->isNewRecord = true;?>

                    

                        <div class="item panel panel-default"><!-- widgetBody -->

                            <div class="panel-heading">

                                <h3 class="panel-title pull-left">Address</h3>

                                <div class="pull-right">

                                    <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>

                                    <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>

                                </div>

                                <div class="clearfix"></div>

                            </div>

                            <div class="panel-body">

                                <?php

                                // necessary for update action.

                                if (!$modelMataPelajaran->isNewRecord) {

                                    echo Html::activeHiddenInput($modelAddress, "[{$i}]id");

                                }

                                ?>

                                <?=

                                $form->field($modelMataPelajaran, "[{$i}]nip_guru")->widget(Select2::classname(), [

                                    'data' => $guru,

                                    'language' => 'en',

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

                                    'pluginOptions' => [

                                        'allowClear' => true

                                    ],

                                ]);

                                ?>

                                <div class="row">

                                    <div class="col-sm-6">

                                        <?= $form->field($modelMataPelajaran, "[{$i}]nama")->textInput(['maxlength' => true]) ?>

                                    </div>

                                    <div class="col-sm-6">

    <?= $form->field($modelMataPelajaran, "[{$i}]kelas")->textInput(['maxlength' => true]) ?>

                                    </div>

                                </div><!-- .row -->

                                <div class="row">

                                    <div class="col-sm-4">

                                        <?= $form->field($modelMataPelajaran, "[{$i}]jurusan")->textInput(['maxlength' => true]) ?>

                                    </div>

                                    <div class="col-sm-4">

                                        <?= $form->field($modelMataPelajaran, "[{$i}]kkm")->textInput(['maxlength' => true]) ?>

                                    </div>

                                    <div class="col-sm-4">

    <?= $form->field($modelMataPelajaran, "[{$i}]keterangan")->textInput(['maxlength' => true]) ?>

                                    </div>

                                </div><!-- .row -->

                            </div>

                        </div>

                <?php endforeach; ?>

                </div>

<?php DynamicFormWidget::end(); ?>

            </div>

        </div>

    </div>

    <div class="form-group">

    <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>

    </div>


<?php ActiveForm::end(); ?>


</div>



i have attached the screenshoot…

thank you very much.

I’ve a similar problem when using Select2 widget within a dynamic form and the following step fixed the problem;

  1. Go to your yii2-dynamic-form.js file. It’s located in app/web/assets/‘somerandomnumber’/ directory.

  2. Get a new version of code from below.

  3. Paste it into file mentioned above.

  4. Reload your form to see if it work.

ps: I just reply in case someone else have similar problem.

The Code




        // "kartik-v/yii2-widget-depdrop"

        var $hasDepdrop = $(widgetOptionsRoot.widgetItem).find('[data-krajee-depdrop]');

        if ($hasDepdrop.length > 0) {

            $hasDepdrop.each(function() {

                if ($(this).data('select2') === undefined) {

                    $(this).removeData().off();

                    $(this).unbind();

                    _restoreKrajeeDepdrop($(this));

                }

            });

        }


        // "kartik-v/yii2-widget-select2"

        var $hasSelect2 = $(widgetOptionsRoot.widgetItem).find('[data-krajee-select2]');

        if ($hasSelect2.length > 0) {

            $hasSelect2.each(function() {

                var id = $(this).attr('id');

                var configSelect2 = eval($(this).attr('data-krajee-select2'));


                if ($(this).data('select2')) {

                    $(this).select2('destroy');

                }


                var configDepdrop = $(this).data('depdrop');

                if (configDepdrop) {

                    configDepdrop = $.extend(true, {}, configDepdrop);

                    $(this).removeData().off();

                    $(this).unbind();

                    _restoreKrajeeDepdrop($(this));

                }

                var s2LoadingFunc = typeof initSelect2Loading != 'undefined' ? initSelect2Loading : initS2Loading;

                var s2OpenFunc = typeof initSelect2DropStyle != 'undefined' ? initSelect2Loading : initS2Loading;

                $.when($('#' + id).select2(configSelect2)).done(s2LoadingFunc(id, '.select2-container--krajee'));


                var kvClose = 'kv_close_' + id.replace(/\-/g, '_');


                $('#' + id).on('select2:opening', function(ev) {

                    s2OpenFunc(id, kvClose, ev);

                });


                $('#' + id).on('select2:unselect', function() {

                    window[kvClose] = true;

                });


               if (configDepdrop) {

                    var loadingText = (configDepdrop.loadingText) ? configDepdrop.loadingText : 'Loading ...';

                    initDepdropS2(id, loadingText);

                }

            });

        }



1 Like