Kartik drepdrop [select2 type] keep loading in dynamic form in second element or more ["hosannahighertech/yii2-dynamicform": "^1.0"] [solved]

Hi,
I’m facing issue in kartik drepdrop (select2 type) keeps loading in dynamic form second element or more.
I looked into browser console and there was no any errors.
I’m using hosannahighertech/yii2-dynamicform": "^1.0
I have used kartik/select2 in this dynamic form and it is OK, but now the problem is in kartik dredrop select2 type.
please advice. thanks before.

I noticed that when i changed the first selected item, both or more warehouse fields would follow the value of first warehouse. here the exampe

This is my form.

<div class="item-usage-form">

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

    <?php 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' => 12 ,                              // 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' => $details[0],
        'formId' => 'form-item-usage',
        'formFields' => [
            'item_id',
            'qty',
            'warehouse_id',
            'disc_percent',
            'hpp' 
        ],
    ]); ?>
    <div class="card">
        <div class="card-header">
            <span><i class="fa fa-cart-plus"></i></span> 
            <span style="font-size: large;">&nbsp; Items Sparepart</span>
            <button type="button" class="float-right add-item btn btn-success btn-sm">
                <i class="fa fa-plus"></i> Add item</button>
            <div class="clearfix"></div>
        </div>
        
        <div class="card-body container-items"> <!-- widgetContainer -->
            <?php foreach ($details as $i => $detail): ?>
            <div class="item card"> <!-- widgetBody -->
                <div class="card-header"> 
                    <?php
                        // necessary for update action.
                        if (! $detail->isNewRecord) {
                            echo Html::activeHiddenInput($detail, "[{$i}]id");
                        }
                    ?>
                    <span class="card-item-title" style="color: blue;">Item : <?= ($i+1) ?></span> 
                    <button type="button" class="float-right remove-item btn btn-danger btn-sm">
                        <i class="fa fa-minus"></i></button>
                    <div class="clearfix"></div>
                </div> <!-- card-header -->
                <div class="card-body">
                    <div class="row">
                        <div class="col-4">
                            <?= $form->field($detail, "[{$i}]item_id")->widget(Select2::class, [
                                'data' => ArrayHelper::map(\app\models\ItemSparepart::find()->where(['listed' => 1])->all(), 'id', 'name'),
                                'language' => 'en',
                                'options' => [
                                    'placeholder' => 'Select item ...',
                                ],
                                'pluginOptions' => [
                                    'allowClear' => true,
                                ],
                                
                            ]);
                            ?>
                            <?php 
                                // Additional input fields passed as params to the child dropdown's pluginOptions
                                echo Html::hiddenInput('input-type-1', 'Additional value 1', ['id' => 'input-type-1']);
                                echo Html::hiddenInput('input-type-2', 'Additional value 2', ['id' => 'input-type-2']);
                            ?>
                        </div>
                        
                        <div class="col-3">
                            <?= $form->field($detail, "[{$i}]warehouse_id")->widget(DepDrop::class, [
                                'type' => DepDrop::TYPE_SELECT2,
                                //'data' => 
                                'options' => [
                                    'id' => 'warehouse_id',
                                    'placeholder' => 'Select warehouse ...',    
                                ],
                                'select2Options' => ['pluginOptions' => ['allowClear' => true]],
                                'pluginOptions' => [
                                    'depends' => ["itemusagedetail-{$i}-item_id"],
                                    'initialize' => true,
                                    'url' => Url::to(['/item-sparepart/list-stock']), 
                                    'params' => ['input-type-1', 'input-type-2'],
                                    'loadingText' => 'Loading warehouse ...',
                                ]
                            ]);
                            ?>
                        </div>
                        
                        <div class="col-2">
                            <?= $form->field($detail, "[{$i}]qty")->widget(MaskedInput::class,
                                [
                                    'clientOptions' => [
                                        'alias' => 'decimal',
                                        'groupSeparator' => ',',
                                        'digits' => 2,
                                        'autoGroup' => true,
                                        'removeMaskOnSubmit' => true,
                                        'rightAlign' => false,
                                    ],
                                    'options' => [
                                        'class' => 'form-control',
                                    ]
                                ]) ?>
                        </div>
                        <div class="col-3">
                            <?= $form->field($detail, "[{$i}]hpp")->widget(MaskedInput::class,
                                [
                                    'clientOptions' => [
                                        'alias' => 'numeric',
                                        'groupSeparator' => ',',
                                        'digits' => 2,
                                        'autoGroup' => true,
                                        'removeMaskOnSubmit' => true,
                                        'rightAlign' => false,
                                    ],
                                    'options' => [
                                        'class' => 'form-control',
                                        'onchange' => 'calculateTotal()',
                                    ]
                                ]) ?>
                        </div>
                    </div> <!-- row -->
                </div> <!-- item card-body -->
            </div> <!-- item card -->
            <?php endforeach; ?>
        
        </div> <!-- card-body container-items -->    
    </div> <!-- card -->
    <?php DynamicFormWidget::end(); ?>

    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
    </div>

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

</div>

I found the solution.
do not put id in options value, just remove it.

'options' => [
        //'id' => 'warehouse_id',   >> caused the errors because the id in elements are same.
        'placeholder' => 'Select warehouse ...',    
 ],
1 Like

migrate to GitHub - yii2-extensions/dynamicform: Yii2 Dynamic form widget for cloning form elements in a nested manner while maintaining accessibility. instead. The hosannahighertech/yii2-dynamicform will soon be marked abandoned. The good is, only namespace is so ar changed. So simple search/replace should work

I run this code and got error

composer require --prefer-dist yii2-extensions/dynamicform:"^1.0.0" -W                     
./composer.json has been updated
Running composer update yii2-extensions/dynamicform --with-all-dependencies
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Root composer.json requires yii2-extensions/dynamicform 1.0.0 -> satisfiable by yii2-extensions/dynamicform[1.0.0].
    - yii2-extensions/dynamicform 1.0.0 requires symfony/css-selector ^6.4||^7.0 -> found symfony/css-selector[v6.4.0, v6.4.3, v7.0.0, v7.0.3] but these were not loaded, likely because it conflicts with another require.


Installation failed, reverting ./composer.json and ./composer.lock to their original content.

Hi,
do you still have this issue?

I’m still using old one hosannahighertech/yii2-dynamicform": "^1.0, not new one you referred [GitHub - yii2-extensions/dynamicform: Yii2 Dynamic form widget for cloning form elements in a nested manner while maintaining accessibility.].
I’m afraid of the compatibility could mess up all my project.
these are my composer file look like :

{
    "name": "yiisoft/yii2-app-basic",
    "description": "Yii 2 Basic Project Template",
    "keywords": ["yii2", "framework", "basic", "project template"],
    "homepage": "http://www.yiiframework.com/",
    "type": "project",
    "license": "BSD-3-Clause",
    "support": {
        "issues": "https://github.com/yiisoft/yii2/issues?state=open",
        "forum": "http://www.yiiframework.com/forum/",
        "wiki": "http://www.yiiframework.com/wiki/",
        "irc": "irc://irc.freenode.net/yii",
        "source": "https://github.com/yiisoft/yii2"
    },
    "minimum-stability": "stable",
    "require": {
        "php": ">=5.4.0",
        "yiisoft/yii2": "~2.0.14",
        "yiisoft/yii2-bootstrap4": "@dev",
        "almasaeed2010/adminlte": "~3.0",
        "dmstr/yii2-adminlte-asset": "3.0.0-beta1",
        "kartik-v/yii2-grid": "@dev",
        "kartik-v/yii2-detail-view": "*",
        "kartik-v/yii2-mpdf": "*",
        "kartik-v/yii2-date-range": "dev-master",
        "kartik-v/yii2-widget-datepicker": "dev-master",
        "kartik-v/yii2-widget-select2": "dev-master",
        "kartik-v/yii2-bootstrap4-dropdown": "@dev",
        "kartik-v/yii2-checkbox-x": "dev-master",
        "hosannahighertech/yii2-dynamicform": "^1.0",
        "kartik-v/yii2-widget-depdrop": "dev-master"
    },
    "require-dev": {
        "yiisoft/yii2-debug": "~2.1.0",
        "yiisoft/yii2-gii": "~2.2.0",
        "yiisoft/yii2-faker": "~2.0.0",
        "codeception/codeception": "^4.0",
        "codeception/verify": "~0.5.0 || ~1.1.0",
        "codeception/specify": "~0.4.6",
        "symfony/browser-kit": ">=2.7 <=4.2.4",
        "codeception/module-filesystem": "^1.0.0",
        "codeception/module-yii2": "^1.0.0",
        "codeception/module-asserts": "^1.0.0"
    },
    "config": {
        "process-timeout": 1800,
        "fxp-asset":{
            "enabled": false
        },
        "allow-plugins": {
            "yiisoft/yii2-composer": true
        }
    },    
    "scripts": {
        "post-install-cmd": [
            "yii\\composer\\Installer::postInstall"
        ],
        "post-create-project-cmd": [
            "yii\\composer\\Installer::postCreateProject",
            "yii\\composer\\Installer::postInstall"
        ]
    },
    "extra": {
        "yii\\composer\\Installer::postCreateProject": {
            "setPermission": [
                {
                    "runtime": "0777",
                    "web/assets": "0777",
                    "yii": "0755"
                }
            ],
            "yii\\composer\\Installer::postInstall": {
                "generateCookieValidationKey": [
                    "config/web.php"
                ]
            }
        }
    },
    "repositories": [
    {
        "type": "composer",
        "url": "https://asset-packagist.org"
    }
    ]
}

do you know the error like this ?
yii2-extensions/dynamicform 1.0.0 requires symfony/css-selector ^6.4||^7.0 -> found symfony/css-selector[v6.4.0, v6.4.3, v7.0.0, v7.0.3] but these were not loaded, likely because it conflicts with another require.

Never had such issue. Can you share composer.json?

It was my previous post composer.json

you need to run cmposer remove hosannahighertech/yii2-dynamicform first to remove old one. then run composer install yii2-extensions/dynamicform

Don’t forget to update namespaces