Introducción

Hay muchas ocasiones en las que, en un formulario, queremos que el contenido de un elemento SELECT cambie a partir de lo que elijamos en otro elemento; el contenido nuevo nos interesa cargarlo por AJAX.

Un sistema de Javascript en ZAF llamado DepMaster puede ocuparse de este trabajo.

Cómo usarlo

Tenemos el siguiente escenario:

  • Un select o un input (que llamaremos BASE) que, a partir de su valor, modificará otro select (que llamaremos TARGET).

  • Un backend AJAX al que le pasaremos el valor de BASE en la URL.

En el elemento BASE, hay que:

  • Establecer la clase CSS zjDepMaster

  • Añadir el atributo data-dep-target, siendo el valor el selector jquery del elemento TARGET.

  • Añadir el atributo data-dep-source, siendo el valor la URL del backend AJAX, teniendo en cuenta que el valor de BASE se añadirá a dicha URL.

El backend AJAX debe devolver en JSON una colección de elementos de la forma { value : Texto a mostrar, ... }.

Ejemplo

Si tenemos:

<input type="text" class="zjDepMaster"
data-dep-target="http://example.com/getlist/" data-dep-source="#lista">
<select id="lista"></select>

Al escribir un "3" en el input, se llamará a http://example.com/getlist/3 y el JSON devuelto se colocará en el select.

Opciones

Hay algunos atributos opcionales que pueden ser útiles:

  • data-dep-keepvalue. Si está establecido a 1, se intentará mantener el valor elegido que tenía el select.
  • data-dep-disabletrigger. Si está establecido a 1, no se lanzará el evento CHANGED sobre el select al cambiar su contenido. De forma predeterminada el evento es lanzado.
  • data-dep-othervalues. Es una lista de selectores JQuery, separados por comas, de otros elementos cuyos valores se recogerán y se enviarán al backend AJAX en el orden especificado. Los valores se enviarán en formato SAFE-ENCODE.

Uso en CRUD

Para usarlo en el CRUD, basta con obtener los FieldViews de los elementos y colocarles la clase CSS zjDepMaster, los atributos data- y el atributo id para el TARGET.

Ejemplo:

// Al SELECT para elegir "Instalación" le pongo el id "bicInst". Será el TARGET
$this->getTableView()->getFieldView('id_srv_instalacion')->setElementId('bicInst');

// Al SELECT para elegir "Servicio" le colocamos la funcionalidad.
$selInst = $this->getTableView()->getFieldView('re_srv_servicio');
$selInst->setCssClass('zjDepMaster');
$selInst->setData([
    'zaf-dep-target'      => "#bicInst",
    'zaf-dep-source'      => \zfx\Config::get('rootUrl') . 'com-ajax/inssrv/1/',
    'zaf-dep-keepvalue'   => 1,
    'zaf-dep-othervalues' => [ '#campoA', '#campoB' ]
]);