Para inicar este post, se debe tener en cuenta las siguientes consideraciones:
- Trabajar en un sitio en Drupal 7
- Contar con un formulario usando el módulo Webform
Ahora si podemos continuar, primero ¿que de interesante tiene este módulo?, pues permite seleccionar a un conjunto de campos (fieldsets) para que inicialmente estén escondidos y de forma progresiva se vayen mostrado cuando se de click en un botón Añadir más.
Da la apariencia de los field collection de añadir más campos de forma dinámica, debido a que aún no hay esta funcionalidad.
Sabiendo esto continuamos con la siguiente secuencia de pasos:
- Descargar e instalar el módulo Webform Add More
- Para nuestro mi caso cuento con la siguiente estructura de campos en mi formulario:
- Descargar e instalar el módulo Webform Add More
- Para nuestro mi caso cuento con la siguiente estructura de campos en mi formulario:
- Clonaré el fielset (Animal Care Teams) dando click al enlace Clone y dando check a la opción Add More Fieldset, obtenemos lo siguiente.
- Hacer el paso anterior y clonar una vez más
- Luego tendremos la siguiente estructura en el back-end:
- Finalmente en el front-end dando un poco de estilos con CSS tendremos:
Ahondando un poco más allá
Hasta ahora sólo se explicó un caso simple, que pasa si se agrega un fieldset más llamado Shelters, se sigue todos los pasos descritos anteriormente, pero como el módulo trabaja haciendo referencia a un fieldset se tiene que anidar cada fieldset (Animal Care Teams y Shelters) dentro de otro, quedando de la siguiente forma:
Pero se presenta un problema... hay un bug en el módulo cuando se tiene fieldsets anidados, y si se prueba agregando y removiendo varias veces te darás con la sorpresa que duplica algunos botones e incluso no los muestra cuando debería.
Pero no se preocupe para corregirlo es necesario hacer los siguientes cambios en el archivo webform_addmore.js:
diff B .../sites/all/modules/webform_addmore/js/webform_addmore.js .../webform_addmore/js/webform_addmore.js
26c26
< var parent_fieldset = $(this).closest('fieldset');
---
> var parent_fieldset = $(this).parents('fieldset');
38,41c38
< //Corrects duplicate Delete buttons
< if (next.find(".del-btn").attr("class") == undefined) {
< $(next).append(delBtn);
< }
---
> $(next).append(delBtn);
52,53c49
< var parent_fieldset = $(this).closest('fieldset');
< if (parent_fieldset.length==0) { return false;}
---
> var parent_fieldset = $(this).parent();
63c59
<
---
>
76,81c72,74
< //Corrects duplicate AddMore buttons
< if (cont.find(".add-more").attr("class") == undefined) {
< $(cont).append(addBtn);
< } else if (cont.find(".add-more").not(':visible').attr("class") != undefined) {
< cont.find(".add-more").show();
< }
---
>
> $(cont).append(addBtn);
> addBtn.show();
96c89
< });
---
> })
y que finalmente quede de la siguiente forma:
Espero les haya servido de algo, saludos y hasta la próxima.
