[solved]usando populate select2 desde otro select2

International Spanish
1

Hola comunidad, estoy intentando utilizar populate select2, según esta dirección url:

[html]“https://mrphp.com.au/blog/populate-select2-from-another-yii2/’]populate Select2”[/html]

cuando selecciono un elemento en el primer select2, el segundo select2 lo muestra vacío, sin ningún elemento, pero al presionar F12, entonces si veo que los lee, ya que trae todos los elementos correspondientes a ese elemento del primer select2, aqui pongo ,los códigos necesarios:

para ello tengo tres tablas:

  1. salidas (campos necesarios):

Idn int autoincremental llave primaria

Codde int //para los elementos del 1er select2

CodOp int //para los elementos del segundo select2

  1. destinos

CodOp int autoincremental llave principal, relacionada con CodOp de salidas

Descripcion varchar 100

  1. destinos_code

CodOp int autoincremental (llave principal) relacionada con CodOp de destinos

Codde int relacionada con Codde de salidas y de destinos

Descripcion varchar 100

en el controlador de destinos:




public function actionPopulateDestinosCode($id) {

    	Yii::$app->response->format = Response::FORMAT_JSON;

    	$destinoCodes = DestinosCode::find()->andWhere(['Codde' => $id])->all();

    	$data = [['id' => '', 'text' => '']];

    	foreach ($destinoCodes as $destinoCode) {

        	$data[] = ['id' => $destinoCode->CodOp, 'text' => $destinoCode->Descripcion];

    	}

    	return ['data' => $data];

	}

en el modelo:




//

...........

[['Codde'], 'exist', 'skipOnError' => true, 'targetClass' => Destinos::className(), 'targetAttribute' => ['Codde' => 'Codde']],

[['CodOp'], 'exist', 'skipOnError' => true, 'targetClass' => DestinosCode::className(), 'targetAttribute' => ['CodOp' => 'CodOp']],

.......

public function getCodOp()

        {

        return $this->hasOne(DestinosCode::className(), ['CodOp' => 'CodOp']);

        }

public function getCodde()

        {

        return $this->hasOne(Destinos::className(), ['Codde' => 'Codde']);

        }

en la vista de salidas:

primer select2




<?=

                $form->field($model, 'Codde')->widget(Select2::className(), [

                        'model' => $model,

                        'attribute' => 'Codde',

                        'data' => ArrayHelper::map(app\models\Destinos::find()->all(), 'Codde', 'Descripcion'), //ok

                        'options' => $select2Options,

                        'pluginEvents' => [

                        'select2:select' => 'function(e) { populateDestinosCode(e.params.data.id); }',

                        ],

                ]);

                ?>

Segundo select2:




<?=

                $form->field($model, 'CodOp')->widget(Select2::className(), [

                        'model' => $model,

                        'attribute' => 'CodOp', //con client_code o turcad

                        'data' => ArrayHelper::map(app\models\DestinosCode::find()->andWhere(['Codde' => $model->Idn])->all(), 'CodOp', 'Descripcion'), //ok

                        'options' => $select2Options,

                ]);

                ?>

script dfe la vista:




<?php ob_start(); // output buffer the javascript to register later ?>

        <script>

        function populateDestinosCode(Codde) {

                var url = '<?= Url::to(['destinos/populate-destinos-code', 'id' => '-id-']) ?>';

                var $select = $('#order-CodOp');

                $select.find('option').remove().end();

                $.ajax({

                url: url.replace('-id-', Codde),

                success: function(data) {

                        var select2Options = <?= Json::encode($select2Options) ?>;

                        select2Options.data = data.data;

                        $select.select2(select2Options);

                        $select.val(data.selected).trigger('change');

                }

                });

        }

        </script>

        <?php $this->registerJs(str_replace(['<script>', '</script>'], '', ob_get_clean()), View::POS_END); ?>

Necesito resolver esto, ya que es una via para obtener dos combos dependientes mediante select2

Gracias por adelantado

saludos

2

Disculpen, me equivoque en los campos de la segunda tabla, que puse anteriormente, la tabla en realidad es:

  1. destinos

Codde int autoincremental llave principal, relacionada con Codde de salidas

Descripcion varchar 100

Voy a mostrar algunas imágenes necesarias para su mejor comprensión:

https://imgur.com/wzzStaz

Este es el primer select2, donde se muestran los destinos:Este es el segundo combo que se muestra vacio donde debe mostrar los elementos de la tabla destinos_code correspondientes al elemento seleccionado en el primer select2:

https://imgur.com/JPZQhj1

Este es la imagen que muestra al debuguear con F12, donde si se ven los elemento que debe mostrar en el segundo select2, o sea, si los lee:

https://imgur.com/UHW41Ep

Por favor este es la vía que vi mas clara para hacer combos dependientes, si algún forista con mas experiencia en yii2 tuviese otra vía mejor también me la puede poner, pero sobre todo con select2.

Saludos gracias

3

Buenos días a todos, el problema se resolvió, para ello cambie los nombres a los campos de las tablas (aunque ese no fue el motivo, si no a errores de código), ahora quedo así, por si ha alguien le interesa este procedimiento lo puede usar es muy bueno para usar combos dependientes con select2:

las tablas ahora son:

  1. salidas (campos necesarios):

Idn int autoincremental llave primaria

destino_id int //para los elementos del 1er select2

destino_code_id int //para los elementos del segundo select2

  1. destinos

Codde int autoincremental llave principal, relacionada con destino_id de salidas

Descripcion varchar 100

  1. destinos_code

CodOp int autoincremental (llave principal)

destino_id int relacionada con destino_code_id de salidas y con Codde de destinos

Descripcion varchar 100

En el controllador de destinos:


public function actionPopulateDestinosCode($id) {

        Yii::$app->response->format = Response::FORMAT_JSON;

        $destinosCodes = \app\models\DestinosCode::find()->andWhere(['destino_id' => $id])->all();

        $data = [['id' => '', 'text' => '']];

        foreach ($destinosCodes as $destinosCode) {

            $data[] = ['id' => $destinosCode->CodOp, 'text' => $destinosCode->Descripcion];

        }

        return ['data' => $data];

    }

en la vista de salidas (form)

Para el primer select2 de con la tabla destinos:


<?=

                $form->field($model, 'destino_id')->widget(Select2::className(), [

                    'model' => $model,

                    'attribute' => 'destino_id',

                    'data' => ArrayHelper::map(app\models\Destinos::find()->all(), 'Codde', 'Descripcion'),

                    'options' => $select2Options,

                    'pluginEvents' => [

                        'select2:select' => 'function(e) { populateDestinosCode(e.params.data.id); }',

                    ],

                ]);

                ?>

Para el segundo select2 de con la tabla destinos_code:


<?=

                $form->field($model, 'destino_code_id')->widget(Select2::className(), [

                    'model' => $model,

                    'attribute' => 'destino_code_id', //con client_code o firmantes

                    'data' => ArrayHelper::map(app\models\DestinosCode::find()->andWhere(['destino_id' => $model->Idn])->all(), 'CodOp', 'Descripcion'),

                    'options' => $select2Options,

                ]);

                ?>

este es el script necesario en la vista:




<script>

       function populateDestinosCode(destino_id) {

            var url = '<?= Url::to(['destinos/populate-destinos-code', 'id' => '-id-']) ?>';

            var $select = $('#datossal-destino_code_id');

            $select.find('option').remove().end();

            $.ajax({

                url: url.replace('-id-', destino_id),

                success: function(data) {

                    var select2Options = <?= Json::encode($select2Options) ?>;

                    select2Options.data = data.data;

                    $select.select2(select2Options);

                    $select.val(data.selected).trigger('change');

                }

            });

        }

        

    </script>

antes del script lleva esto para inicializar el procedimiento:


<?php ob_start(); // output buffer the javascript to register later

al final del script, lleva esto para finalizarlo:


<?php $this->registerJs(str_replace(['<script>', '</script>'], '', ob_get_clean()), View::POS_END); ?>

Esta es la variable utilizada en la vista:


$select2Options = [

    'multiple' => false,

    'theme' => 'krajee',

    'placeholder' => 'Modo de autocompletar',

    'language' => 'en-US',

    'width' => '100%',

];

Gracias por las visitas, ojala a alguien mas les sirva, realmente en la misma forma utilice mas de una vez el procedimiento con otros combos dependientes, adicionandolo al script