Function "Add" Javascript not working with type : MultipleInputColumn::TYPE_HIDDEN_INPUT

[gplaza]

Thx for your great lib !
All is in the title.

Sorry for the PR ... I'm not a javascript guru.

Workaround for column :

[ 'name' => 'xxxx', 'options' => [ 'style' => 'display: none;', ], ],

[unclead]

i didn't get the problem. Post an example of code, please

[gplaza]

Code sample :

$this->registerJs('	
function loadRRHH(ordenID) {

    $.post("generate-rrhh?orden_trabajo=" + ordenID, function(data) { 
        
        var index = 0;
        $("#rh-list").multipleInput("clear");
        
        $.each(data.procesos,function(key, value) { 
            if(index == 0) { 
                // work as espected :
                $("#costo-rhlist-0-descripcion").val(value.description);
                $("#costo-rhlist-0-procesoid").val(value.procesoid);
                $("#costo-rhlist-0-operadorid").val(value.operadorid);
                $("#costo-rhlist-0-operador").val(value.operador);
                $("#costo-rhlist-0-total").val(value.total);
            } else {
                // Skip some fields :
                $("#rh-list").multipleInput("add",{
                    descripcion: value.description.toString(),
                    procesoid: value.procesoid.toString(),
                    operador: value.operador.toString(),
                    operadorid: value.operadorid.toString(),
                    total : value.total.toString(),
                });
            }
            index++;
        });
    });
};
', View::POS_END);

        <?=
        $form->field($model, 'rhlist')->widget(MultipleInput::className(), [
            'id' => 'rh-list',
            'allowEmptyList' => false,
            'rowOptions' => [
                'id' => 'row{multiple_index_rh-list}',
            ],
            'columns' => [
                [
                    'title' => 'Proceso OT',
                    'name' => 'descripcion',
                ],
                [
                    'name' => 'procesoid',
                    'title' => 'Hidden proceso id',
                    'type' => 'hiddenInput'
                ],
                [
                    'title' => 'Operador',
                    'name' => 'operador',
                ],
                [
                    'name' => 'operadorid',
                    'title' => 'Hidden operador id',
                    'type' => 'hiddenInput'
                ],
                 [
                    'title' => 'Valor total',
                    'name' => 'total',
                ],
            ]
        ])->label(false);
        ?>

[unclead]

Hmm it works for me

<?php
    echo $form->field($model, 'emails')->widget(MultipleInput::className(), [
        'id' => 'emails-example',
        'max'  => 6,
        'allowEmptyList' => false,
        'columns' => [
            [
                'name' => 'email_id',
                'type'  => MultipleInputColumn::TYPE_HIDDEN_INPUT,
            ],
            [
                'name' => 'email',
                'options' => [
                    'placeholder' => 'E-mail'
                ]
            ]
        ],
        'min'  => 2, // should be at least 2 rows
        'addButtonPosition' => [
            MultipleInput::POS_HEADER,
            MultipleInput::POS_FOOTER,
            MultipleInput::POS_ROW
        ]
    ])
    ->label(false);
?>

then i call js method

$('#emails-example').multipleInput('add', {'email_id': 3, 'email': 'test'})

and i see new row with correct data

If it is still relevant then please provide the same screenshot to ensure that something wrong in your case

[gplaza]

I seem the problem is :

1 regular
1 hidden
1 regular
1 hidden

I'm not sure about the order ... i'll post asap screenshot.
error : All regular fields are not filled, it skip 1 regular input.

[gplaza]

Very strange ... the valor used not respect the field.
javascrit ajax call :

$.post("generate-rrhh?orden_trabajo=" + ordenID, function(data) { 
        
        var index = 0;
        var indexCompra = 0;
        $("#rh-list").multipleInput("clear");
        
        $.each(data.procesos,function(key, value) { 
            if(index == 0) { 
                $("#costo-rhlist-0-descripcion").val(value.description);
                $("#costo-rhlist-0-procesoid").val(value.procesoid);
                $("#costo-rhlist-0-operadorid").val(value.operadorid);
                $("#costo-rhlist-0-operador").val(value.operador);
                $("#costo-rhlist-0-hora").val(value.hora);
                $("#costo-rhlist-0-horas").val(value.hora);
            } else {                
                $("#rh-list").multipleInput("add",{
                    "descripcion": value.description.toString(),
                    "procesoid": value.procesoid.toString(),
                    "operador": value.operador.toString(),
                    "operadorid": value.operadorid.toString(),
                    "funcion" : "",
                    "valor-hora" : "",
                    "hora": value.hora.toString(),
                    "horas" : value.hora.toString(),
                });
            }
            index++;
        });
    });

PHP :

        <?=
        $form->field($model, 'rhlist')->widget(MultipleInput::className(), [
            'id' => 'rh-list',
            'allowEmptyList' => false,
            'columns' => [
                [
                    'title' => 'Proceso OT',
                    'name' => 'descripcion',
                ],
                [
                    'name' => 'procesoid',
                    'type' => 'hiddenInput'
                ],
                [
                    'title' => 'Operador',
                    'name' => 'operador',
                ],
                [
                    'name' => 'operadorid',
                    'type' => 'hiddenInput'
                ],
                [
                    'title' => 'Funcion/especialidad',
                    'name' => 'funcion',
                ],
                [
                    'title' => 'Valor hora',
                    'name' => 'valor-hora',
                    'options' => [
                        'style' => 'width: 110px;',
                        'onchange' => 'row = /\d+/.exec($(this).attr("id"));
                                valor = $(this).val();
                                rowId = "#costo-rhlist-" + row;
                                hora = $(rowId + "-hora").val();
                                if (valor != "" && hora != "") {
                                    total = valor * hora;
                                    $(rowId + "-total").val(total.toFixed(0));
                                }
                                sumaRRHH();',
                    ],
                ],
                [
                    'title' => 'Horas',
                    'name' => 'hora',
                    'options' => [
                        'disabled' => 'disabled',
                        'style' => 'width: 110px;',
                    ],
                ],
                [
                    'name' => 'horas',
                    'type' => 'hiddenInput'
                ],
                [
                    'title' => 'Valor total',
                    'name' => 'total',
                    'options' => [
                        'style' => 'width: 110px;',
                    ],
                ],
            ]
        ])->label(false);
        ?>

json :

{"procesos":[
{"operador":"admin","description":"Realizar corte de material","operadorid":1,"procesoid":2,"hora":"0.32"},
{"operador":"vimonsa","description":"Realizar corte de material","operadorid":2,"procesoid":2,"hora":"0.17"}
]}

First line filled by :

$("#costo-rhlist-0-descripcion").val(value.description);
$("#costo-rhlist-0-procesoid").val(value.procesoid);
$("#costo-rhlist-0-operadorid").val(value.operadorid);
$("#costo-rhlist-0-operador").val(value.operador);
$("#costo-rhlist-0-hora").val(value.hora);
$("#costo-rhlist-0-horas").val(value.hora);

Result :

<input type="hidden" id="costo-rhlist-0-procesoid" name="Costo[rhlist][0][procesoid]" value="2">
<input type="hidden" id="costo-rhlist-0-operadorid" name="Costo[rhlist][0][operadorid]" value="1">
<input type="hidden" id="costo-rhlist-0-horas" name="Costo[rhlist][0][horas]" value="0.32">
<input type="text" id="costo-rhlist-0-descripcion" class="form-control" name="Costo[rhlist][0][descripcion]" tabindex="1">
<input type="text" id="costo-rhlist-0-operador" class="form-control" name="Costo[rhlist][0][operador]" tabindex="1">
<input type="text" id="costo-rhlist-0-funcion" class="form-control" name="Costo[rhlist][0][funcion]" tabindex="1">
[...]

Second line filled by :

$("#rh-list").multipleInput("add",{
                    "descripcion": value.description.toString(),
                    "procesoid": value.procesoid.toString(),
                    "operador": value.operador.toString(),
                    "operadorid": value.operadorid.toString(),
                    "funcion" : "",
                    "valor-hora" : "",
                    "hora": value.hora.toString(),
                    "horas" : value.hora.toString(),
                });

Result :

<input type="hidden" id="costo-rhlist-1-procesoid" name="Costo[rhlist][1][procesoid]" value="Realizar corte de material">
<input type="hidden" id="costo-rhlist-1-operadorid" name="Costo[rhlist][1][operadorid]" value="2">
<input type="hidden" id="costo-rhlist-1-horas" name="Costo[rhlist][1][horas]" value="vimonsa">
<input type="text" id="costo-rhlist-1-descripcion" class="form-control" name="Costo[rhlist][1][descripcion]" tabindex="1">
<input type="text" id="costo-rhlist-1-operador" class="form-control" name="Costo[rhlist][1][operador]" tabindex="1">
<input type="text" id="costo-rhlist-1-funcion" class="form-control" name="Costo[rhlist][1][funcion]" tabindex="1">
[...]

procesoid get the value of "description"
horas get the value of "operador"
some other errors (show the screenshot)

[unclead]

After 2 years I finally found time to investigate and fix this issue 😄 It was fixed in 2.25.0

[gplaza]

yeah !!