quarta-feira, 18 de março de 2009

HTML: select (drop down) em cascata com MentaAjax

Finalmente acredito ter chegado a uma boa solução para controle de 3 campos select (drop down ou mesmo combobox) em cascatas. Para melhor ilustração aí vai o cenário da estrutura de dados. Tenho um catálogo de materiais, cada item deste catálogo faz parte de um subgrupo, cada subgrupo faz parte de um grupo e cada grupo faz parte de uma classe. Preciso selecionar o subgrupo a que pertence um item do catálogo e para tanto faz-se necessário: primeiro a seleção da classe, feita esta seleção o select com as grupos é preenchido; segundo faz-se a seleção do grupo e com isto o select dos subgrupos é preenchido para seleção final.
Estou desenvolvendo este catálogo em Java com mentawai para MVC. Tentei utilizar um cenário igual em que o cascateamento é feito com País, Estado e Cidade, desenvolvimento e relatado no fórum do mentawai, mas não obtive o resultado que desejava. Na verdade eu queria que ao ser feita uma nova seleção de classe, automaticamente os select com grupos e subgrupos fosse preenchidos automaticamente, sendo que o select dos grupos conteria os grupos da classe selecionada e o select dos subgrupos conteria os subgrupos do primeiro grupo da classe selecionada.
Chega de enrolação e vamos ao código!
Primeiro as configurações das actions no ApplicationManager:


action("/manager/FormMateriais", FormMateriais.class).on(SUCCESS, fwd("/manager/formMaterial.page"));
action("/manager/FormMateriais", FormMateriais.class, "add").on(SUCCESS, fwd("/manager/FormMateriais.mtw"));
action("/manager/FormMateriais", FormMateriais.class, "preencheComboGrupo").ajaxOk(new JSONGenericRenderer());
action("/manager/FormMateriais", FormMateriais.class, "preencheComboSubGrupo").ajaxOk(new JSONGenericRenderer());




Ao ser chamada URL /manager/FormMateriais.mtw, esta preenche a output com as classe, os grupos da primeira classe e os subgrupos do primeiro grupo da primeira classe. Como estou utilizando a tag html do mentawai (mtw:select) esta preenche automaticamente os select classe, grupo e subgrupo com os Maps da output.



@Override
public String execute() throws Exception {
Connection conn = (Connection) input.getValue("conn");

ClasseDAO classeDAO = new ClasseDAO(conn);
GrupoDAO grupoDAO = new GrupoDAO(conn);
SubGrupoDAO subGrupoDAO = new SubGrupoDAO(conn);

output.setValue("classe", classeDAO.getMap(classeDAO.list()));
output.setValue("grupo", grupoDAO.getMap(grupoDAO.list(classeDAO.list().get(0).getId())));
output.setValue("subgrupo", subGrupoDAO.getMap(subGrupoDAO.list(grupoDAO.list(classeDAO.list().get(0).getId()).get(0).getSeq())));
return SUCCESS;
}



Por fim, meu JSP com alguns recursos de Ajax disponibilizados pelo mentawai, permitem o preenchimento dinâmico dos selects grupo e subgrupo a cada evento onclick das selects classe e grupo.








< script type="text/javascript">
function getList(transport) {
var response = new mtw.response(transport);
response.replaceOptions("grupo");
}

function getList1(transport) {
var response = new mtw.response(transport);
response.replaceOptions("subgrupo");
}

function doRequest() {
var req = new mtw.request();
req.setUrl("FormMateriais.preencheComboGrupo.mtw");
req.addParameter("idClasse", $('classe').value);
mtw.removeOptions("grupo");
req.onSuccess(getList);
req.send();

doRequest1();
}

function doRequest1() {
var req1 = new mtw.request();
req1.setUrl("FormMateriais.preencheComboSubGrupo.mtw");
req1.addParameter("idClasse", $('classe').value);
req1.addParameter("idGrupo", $('grupo').value);
mtw.removeOptions("subgrupo");
req1.onSuccess(getList1);
req1.send();
}
< /script>




Bom, ainda não consegui resolver o problema de fazer os preenchimentos automáticos dos selects grupo e subgrupo para outros eventos que não o onclick, na verdade isto é um problema comigo ou com o mentawai, pois não consigo definir dois eventos diferentes nas tags mtw:select, assim resolvi usar onclick em detrimento a onchange ou mesmo onblur.

Era isto por enquanto. Abraços amigos.

Nenhum comentário: