Dual dropdown dependent on Yii2

Question

How can I resolve this implementation below, so it performs the 2 dependency routines associated with the same onChange event:

Example:

<?php echo $form->field($model, 'id_data_type', [
        'hintType' => ActiveField::HINT_SPECIAL,
        'hintSettings' => [
            'placement' => 'right',
            'iconBesideInput' => false,
            'onLabelClick' => true,
            'onLabelHover' => false,
            'onIconClick' => true,
            'onIconHover' => false,
            'title' => '<i class="glyphicon glyphicon-info-sign">'.Yii::t('app','Tipo de Dado')
        ]])->dropDownList(\yii\helpers\ArrayHelper::map(DataTypes::find()->asArray()->all(),'id_data_type','name'),
        ['prompt' => Yii::t('app', 'Selecione opção'),
            'onchange'=>'$.get( "'. \yii\helpers\Url::toRoute('dependent/getviewcomponentinput').'", { id: $(this).val() } ).done(function( data ) { $( "#'.Html::getInputId($model,'id_data_view_component_input').'" ).html( data ); } );',
            'onchange'=>'$.get( "'. \yii\helpers\Url::toRoute('dependent/getviewcomponentoutput').'", { id: $(this).val() } ).done(function( data ) { $( "#'.Html::getInputId($model,'id_data_view_component_output').'" ).html( data ); } );',
        ]);
    ?>


<?php echo $form->field($model, 'id_data_view_component_input', [
        'hintType' => ActiveField::HINT_SPECIAL,
        'hintSettings' => [
            'enableAjaxValidation' => true,
            'placement' => 'right',
            'iconBesideInput' => false,
            'onLabelClick' => true,
            'onLabelHover' => false,
            'onIconClick' => true,
            'onIconHover' => false,
            'title' => '<i class="glyphicon glyphicon-info-sign">'.Yii::t('app','Componente Visual de Entrada')
        ]])->dropDownList([],['prompt' => Yii::t('app', 'Selecione Opção')]);
    ?>


    <?php echo $form->field($model, 'id_data_view_component_output', [
            'hintType' => ActiveField::HINT_SPECIAL,
            'hintSettings' => [
                'enableAjaxValidation' => true,
                'placement' => 'right',
                'iconBesideInput' => false,
                'onLabelClick' => true,
                'onLabelHover' => false,
                'onIconClick' => true,
                'onIconHover' => false,
                'title' => '<i class="glyphicon glyphicon-info-sign">'.Yii::t('app','Componente Visual de Saída')
            ]])->dropDownList([],['prompt' => Yii::t('app', 'Selecione Opção')]);
    ?>

class DependentController extends \yii\web\Controller
{
    public function actionGetviewcomponentinput($id)
    {
        switch ($id) {
            case 1: // Boolean

                $types = ComponentDataView::find()
                    ->where(['input_representation'=>true,'boolean_representation' => true])
                    ->all();
                break;

            case 2: // Integer

                $types = ComponentDataView::find()
                    ->where(['input_representation'=>true,'integer_representation' => true])
                    ->all();
                break;
            case 3: // String

                $types = ComponentDataView::find()
                    ->where(['input_representation'=>true,'string_representation' => true])
                    ->all();
                break;
            case 4: // Float

                $types = ComponentDataView::find()
                    ->where(['input_representation'=>true,'float_representation' => true])
                    ->all();
                break;
        }

        if (!empty($types)) {
            foreach ($types as $type) {
                echo "<option value='" . $type->id_data_view_component . "'>" . $type->name . "</option>";
            }
        } else {
            echo "<option>-</option>";
        }
    }

    public function actionGetviewcomponentoutput($id)
    {
        switch ($id) {
            case 1: // Boolean

                $types = ComponentDataView::find()
                    ->where(['output_representation'=>true,'boolean_representation' => true])
                    ->all();
                break;

            case 2: // Integer

                $types = ComponentDataView::find()
                    ->where(['output_representation'=>true,'integer_representation' => true])
                    ->all();
                break;
            case 3: // String

                $types = ComponentDataView::find()
                    ->where(['output_representation'=>true,'string_representation' => true])
                    ->all();
                break;
            case 4: // Float

                $types = ComponentDataView::find()
                    ->where(['output_representation'=>true,'float_representation' => true])
                    ->all();
                break;

        }

        if (!empty($types)) {
            foreach ($types as $type) {
                echo "<option value='" . $type->id_data_view_component . "'>" . $type->name . "</option>";
            }
        } else {
            echo "<option>-</option>";
        }
    }

}

What I need: When selecting the Dropdownlist from the field id_data_type, should be updated (Dependent Dropdown) the fields id_data_view_component_input and id_data_view_component_output, through the routines actionGetviewcomponentinput and actionGetviewcomponentatput using the event onchange.

Answer 1

If I understand correctly, you want to call the two routines (input and output) in the same event?

If this is the case, in your example you are recording two "onChange" events, making the second one overwrite the first one and be the only one called. The correct is to send the two gets and flames the two routines in the same event (as in the code below).

If you need to call an event after another, use the callbacks of "Success" for the first routine and the "done" for the second.

['prompt' => Yii::t('app', 'Selecione opção'),
'onchange' => '
    $.get("'.\yii\helpers\Url::toRoute('dependent/getviewcomponentinput').'", { id: $(this).val() } ).done(function( data ) { $( "#'.Html::getInputId($model,'id_data_view_component_input').'").html(data);});
    $.get("'.\yii\helpers\Url::toRoute('dependent/getviewcomponentoutput').'", { id: $(this).val() } ).done(function( data ) { $( "#'.Html::getInputId($model,'id_data_view_component_output').'").html(data);});
',
]);