“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:

<script src="SpryAssets/xpath.js" type="text/javascript"><!--mce:0--></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>

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:

<div>
 
Selecione um estado e uma cidade abaixo:
<form id="form1" method="post">
 
<span id="stateSelector">
<select id="stateSelect" name="stateSelect">
      <option selected="selected" value="{uf}">{uf}</option>
      <option value="{uf}">{uf}</option>
    </select>
 
    </span>
    <span id="citySelector">
<select id="citySelect" name="citySelect">
        <option selected="selected" value="{name}">{name}</option>
        <option value="{name}">{name}</option>
      </select>
 
    </span>
 
    <label>
<input id="ok" name="ok" type="button" value="ok" />
    </label>
</form></div>

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