Update dropdown itens from another dropdown change value

[Anderson Florencio]

Hello Pascal, I'm trying to change the options of a dropdown menu from another dropdown widget, but I am unable to update the view with the data obtained in the Ajax request.

$('#despesa_form_id_tipo_despesa').on('zdkdropdownchange', function () {
            var selectedItemValue = $('#despesa_form_id_tipo_despesa').val();

            if (selectedItemValue !== "_") {
                var obj = new Object();
                obj['id_tipo_despesa'] = selectedItemValue;
                znetdk.request({
                    control: 'subtipodespesactrl',
                    action: 'filtrar_subtipos',
                    data: obj,
                    callback: function (response) {

                        var dropdown = $('#despesa_form_id_subtipo_despesa').zdkdropdown();
                        //console.log($('#despesa_form_id_subtipo_despesa'));
                        if (response.rows.length > 0) {
                            $.each(response, function (index, item) {
                                for (var i = 0; i < item.length; i++) {
                                    //console.log(item[i].label);
                                    dropdown.empty();
                                    dropdown.append("<option>" + item[i] + "<option>");
                                }

                            }
                            );
                            $('#linha_despesa_form_id_subtipo_despesa').show();
                        } else {
                            $('#linha_despesa_form_id_subtipo_despesa').hide();
                        }
                    }});
            }
        });

Could you help me, already I googled a lot and no code worked here.

[Pascal Martinez]

Hello Anderson,

You can load dynamically the items of a dropdown widget by setting a new value for its 'data' option.

For example, $('#mydropdown').zdkdropdown('option', 'data', myNewArrayOfItems);

So, the Dropdown widget remove automatically its existing items and reload itself from the values passed through the specified array.

Here is below how you could adapt your original source code:

$('#despesa_form_id_tipo_despesa').on('zdkdropdownchange', function () {

    var selectedItemValue = $('#despesa_form_id_tipo_despesa').val();

    if (selectedItemValue !== "_") {

        var obj = new Object();

        obj['id_tipo_despesa'] = selectedItemValue;

        znetdk.request({

            control: 'subtipodespesactrl',

            action: 'filtrar_subtipos',

            data: obj,

            callback: function (response) {

                if (response.rows.length > 0) {

                    $('#despesa_form_id_subtipo_despesa')
                       .zdkdropdown('option', 'data', response.rows);

                    $('#linha_despesa_form_id_subtipo_despesa').show();

                } else {

                    $('#linha_despesa_form_id_subtipo_despesa').hide();

                }

            }

        });

    }

});

Let me know if it works.

Pascal MARTINEZ

www.znetdk.fr

[Jose Puertas]

Hola, estoy intentando implementar lo que comentais en este post para rellenar un listbox dependiendo del valor de un dropdown, pero no sé como pasarle el valor al controlador para que haga el filtro.

javascript:

<script>
    $('#CatSel').on('zdkdropdownchange', function () {


        var SelectedItem = $('#CatSel').val();
        if (SelectedItem !== "_") {
            var cat = new Object();
            cat['id_categoria'] = SelectedItem;
            znetdk.request({
                control: 'asigjugadoresctrl',
                action: 'RecJugadores',
                data: cat,

                callback: function (response) {
                    if (response.rows.length > 0) {

                        $('#jugrec')
                                .zdklistbox('option', 'data', response.rows);
                   }
                }
            });


        }
        ;
    });


</script>

vista:

 

<label>Categoria: </label>
        <select class="zdk-dropdown" name="categoria" id="CatSel"
                data-zdk-action="categoriasctrl:RecCategoria"
                data-zdk-noselection="Seleccionar un valor..."></select>

controlador:

static protected function action_RecJugadores() {
    $filtrouserDAO = new \app\model\filtrocatDAO();
      $filtrouserDAO->setCatDAsFilter(cat);  // aqui es donde debo pasar el valor recojido del dropdown para hacer el filtro
   
       $user_id=  $filtrouserDAO->getResult();
      $filtro = $user_id['año_inicio_categoria'];
       $filtro2 = $user_id['año_fin_categoria'];
        $jugadoresDAO = new \app\model\jugadasigDAO();
        $jugadoresDAO->setNameAsFilter($filtro,$filtro2);
        $jugador = array();
        while ($row = $jugadoresDAO->getResult()) {
            /* $categoria[] = $row; */
            $jugador[] = array('label' => $row['Use_nombre'] . ' ' . $row['Use_apellidos'], 'value' => $row['id_usuario']);
        }
        /* Réponse retournée au contrôleur principal */
        $response = new \Response();
        $response->rows = $jugador;
        $response->success = true;
        return $response;
    }

modelo para el filtro:

 public function setCatDAsFilter($userId) {
        $this->table = "categorias";
        $this->IdColumnName = "id_categoria";
        $this->query = "select categorias.ano_inicio_categoria, categorias.ano_fin_categoria from categorias";
        $this->filterClause = " where categorias.id_categoria like ?";
        $this->setFilterCriteria($userId);
    }

modelo para los resultados:

 

public function setNameAsFilter($date1,$date2) {
        $this->filterClause = " where (Use_ano_nacimiento  BETWEEN (?) AND (?))AND Use_activo_temporada is null;";
        $this->setFilterCriteria($date1,$date2);
    }

Saludos

[Anderson Florencio]

Hello Jose, to take the value passed through the dropdown menu just change your action_RecJugadores() method as below

static protected function action_RecJugadores() {
    $filtrouserDAO = new \app\model\filtrocatDAO();

    $request = new \Request();
    $id_categoria = $request->id_categoria
    $filtrouserDAO->setCatDAsFilter($id_categoria);  // aqui es donde debo pasar el valor recojido del dropdown para hacer el filtro

[Jose Puertas]

Hola, el método RecCategoriaqueda de la siguiente forma:

static protected function action_RecCategoria() {
        $categoriasDAO = new categoriasDAO();
        $categoriasDAO->setSortCriteria('nombre_categoria');
        $categoria = array();
        while ($row = $categoriasDAO->getResult()) {

            /* $categoria[] = $row; */

            $categoria[] = array('label' => $row['nombre_categoria'], 'value' => $row['id_categoria']);

        }
        /* Réponse retournée au contrôleur principal */
        $response = new \Response();

        $response->rows = $categoria;

        $response->success = true;
        return $response;
    }

También he intentado otras formas para actualizar los datos del listbox que tampoco me han funcionado:

$("#asigna_jug_tigre").on('zdkformcomplete', function(){
           $("#jugrec_tigre").zdklistbox('refresh');
 });

tambien usando el boton refresh

<div id="zdk_user_asigna_tigre" class="zdk-action-bar" data-zdk-dialog="asigna_jug_tigre" data-zdk-datatable="table_usuarios">
   
<button class="zdk-bt-refresh"><?php echo LC_BTN_REFRESH; ?></button>
</div>

 y ninguno funciona

la vista completa es:

<!-- ZnetDK, Starter Web Application for rapid & easy development
See official website http://www.znetdk.fr
Copyright (C) 2015 Pascal MARTINEZ (con...@znetdk.fr)
--------------------------------------------------------------------
Vue du tutoriel ZnetDK (www.znetdk.fr/tutoriel).
-->
<script>
 
    $("#asigna_jug_tigre select[name=categoria]").on('change', function(){
             $("#jugrec_tigre").zdklistbox('refresh');
        });
    $("#asigna_jug_tigre").on('zdkformcomplete', function(context response){
           $("#jugrec_tigre").zdklistbox('refresh');
           
        });
    </script>


<!-- Boutons d'action -->
<div id="zdk_user_asigna_tigre" class="zdk-action-bar" data-zdk-dialog="asigna_jug_tigre" data-zdk-datatable="table_usuarios">
   
<button class="zdk-bt-refresh"><?php echo LC_BTN_REFRESH; ?></button>
</div>





<div id="zdk_user_asigna_tigre"  >
   
    <h1>Asignación de jugadores al equipo TIGRES</h1>
   
    <form class="zdk-form" id="asigna_jug_tigre"
          data-zdk-action="Tasigjugadoresctrl:RecJugEquipos"
          data-zdk-datatable="table_jugadores">
       
        <label>Equipo : </label>
        <select class="zdk-dropdown" name="equipo"
                data-zdk-action="equiposctrl:getEquipos"

                data-zdk-noselection="Seleccionar un valor..."></select>


        <label>Categoria: </label>
        <select class="zdk-dropdown" name="categoria" id="CatSel"
                data-zdk-action="categoriasctrl:RecCategoria"
                data-zdk-noselection="Seleccionar un valor..."></select>

        <label>Temporada: </label>
        <select class="zdk-dropdown" name="temporada"
                data-zdk-action="Tasigjugadoresctrl:Rectemporada"

                data-zdk-noselection="Seleccionar un valor..."></select>

       
        <fieldset>
            <legend>Elegir jugadores para el equipo</legend>
           


            <select class="zdk-listbox" name="jugadores[]" multiple="multiple"
                    id="jugrec_tigre"       data-zdk-action="Tasigjugadoresctrl:RecJugadores"></select>
           
        </fieldset>
       
        <button class="zdk-bt-save" type="submit">Guardar</button>






    </form>
</div>

Saludos

[Jose Puertas]

Hola Pascal y Anderson, el método request no me devuelve el valor del dropdown para poder realizar el filtro, sin embargo cuando hago la asignación de los equipos si me devuelve ese valor, no entiendo el porqué.

Saludos