"Combo carrega combo" usando o Spry

Pra quem não conhece, o Spry é um framework Ajax. O que diferencia o Spry de outros frameworks é o seguinte: ele possui uma própria marcação no código HTML para a execução dos scripts, não necessita de grandes conhecimentos de JavaScript para usá-lo e ele já vem integrado no Dreamweaver.

Para quem não utiliza o Dreamweaver, pode baixar o framework no site da Adobe. Será necessário também que você faça download dessa pasta que contém todos os XML que precisaremos para este tutorial.

Nesse artigo ensinarei a criar um “Combo carrega combo” usando o Spry. Veja o exemplo aqui. Para isso usarei o típico seletor de Estado/Cidade. Basicamente a nossa lógica será a seguinte:

1. Existe um XML chamado “estados.xml” esse arquivo contém um parâmetro chamado <url> que indica qual é o XML das cidades daquele estado. Exemplo:

    Acre
    AC
    01
    AC.xml

Assim poderemos chamar as cidades daquele estado. Criemos primeiramente nosso arquivo HTML. Teremos que definir qual será a nossa fonte de dados, ou seja, nossos dataSets. O início do HTML deve ser:

Perceba que no código javascript temos isso:

var dsEstados = new Spry.Data.XMLDataSet("dados/estados.xml", "estados/estado");
var dsCidades = new Spry.Data.XMLDataSet("dados/{dsEstados::url}", "state/cidades/cidade");

O parâmetro {dsEstados::url} fará com que o javascript pegue o item url no arquivo XML estados.xml do estado selecionado. Também é necessário que os arquivos xpath.js e SpryData.js estejam na pasta indicada

Após isso, faremos que quando a pessoa selecione um estado, o combo da cidade fique desabilitado e assim seja carregado o XML com todas as cidades do estado selecionado. Veja o código do formulário abaixo:

Selecione um estado e uma cidade abaixo:




{uf}
{uf}


    
    

{name}
{name}


    

    

    

Vejam que os atributos {name} e {uf} fazem referência aos itens encontrados nos XML das cidades. O próprio Spry possui uma estrutura condicional para manter a interligação entre os combos.

Vocês podem fazer download dos arquivos utilizados por esse tutorial logo abaixo. E qualquer dúvida é só perguntar!

Arquivos necessários:

Ou aqui

Spry

XML – Estados

Exemplo completo