Popular um combo através de outro. Estou utilizando ajax, mas preciso de uma pequena ajuda

1 resposta
gabriel.coelho

Bom dia pessoal, estou com um probleminha aqui na empresa. Não utilizo nenhum tipo de framework, então por favor, quem for me ajudar, não utilizem framework tbm. Isso ta foda…

Preciso popular uma combo “Cidades” através da seleçao do combo “Estado”.
Quando seleciono um Estado, realmente ele está alterando o combo de cidades, porém está dando erro na jsp, dizendo que “null” é nulo ou não é um objeto. Entao acho que a lista de cidades ta vindo null. Mas não to conseguindo descobrir a qual momento ele passa um estado como parametro para o metodo listarCidades(int estado) através do js.

Eu vo colocar aqui o meu código, pra vc ver como estou fazendo…
Ao clicar no combo Estado, ele roda o js pra montar a lista de Cidades, q é o getListaCidades abaixo. No onChange do combo, eu chamo esse js.

function getListaCidades() {
//	setStatusBar("Listando...");

	var httpRequest = getXMLHttp();
	if (!httpRequest) {
              alert("Erro ao criar objeto AJAX!");
              return;
	}

	var estado = document.getElementById("localOrigemEstado");
	if (!estado) return;

	var cidade = document.getElementById("localOrigemCidade");
	if (!cidade) return;

	var url = "/apontamentoAtividades";
	var params = "act=listarCidades" +
                 "&estado=" + encodeURIComponent(estado.value) +
                 "&cidade=" + encodeURIComponent(cidade.value);

	httpRequest.onreadystatechange = function() { montarListaCidades(httpRequest); };

	httpRequest.open("POST", url, true);

	httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	if (params != null)
		httpRequest.setRequestHeader("Content-length", params.length);
	httpRequest.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
	httpRequest.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
	httpRequest.setRequestHeader("Pragma", "no-cache");
	httpRequest.setRequestHeader("Connection", "close");

	httpRequest.send(params);

}

function montarListaCidades(httpRequest) {

	if (httpRequest.readyState == 4) {
		if ( (httpRequest.status == 200) && (httpRequest.responseXML) ) {

			var select = document.getElementById("localOrigemCidade");
			if (select) {

				select.length = 0;
				select.options[0] = new Option("Carregando...");
				select.disabled = true;

				var xml = httpRequest.responseXML;
				var doc = xml.documentElement;
				var items = doc.getElementsByTagName("cidade");
				var item = null;

				var optStr = "";
				var optVlr = "0";
				var optSelected = "0";
				var isSelectedItem = false;
				var newOption = null;

				if (items.length > 0) {
					newOption = new Option(optStr, optVlr, true, false);
					select.options[0] = newOption;
				} else {
					optStr = "[  Nenhuma cidade dispon�vel  ]";
					newOption = new Option(optStr, optVlr, true, false);
					select.options[0] = newOption;
				}

				for (var i = 0; i < items.length; i++) {
					item = items[i];

				optStr = item.getElementsByTagName("nome").item(0).getAttribute("value");
				optVlr = item.getElementsByTagName("id").item(0).getAttribute("value");
				optSelected = item.getElementsByTagName("selected").item(0).getAttribute("value");

				isSelectedItem = (optSelected == "1");

				newOption = new Option(optStr, optVlr, isSelectedItem, isSelectedItem);

				select.options[select.length] = newOption;

				}

				select.disabled = false;

			}

			setStatusBar("");

		} else {
			setStatusBar("");
			alert("Falha ao recuperar dados XML:\n" + httpRequest.statusText);
		}

		enableNomeCidade(0);

	}

Assim q ele executa o js, ele chama o metodo “listarCidades(int estado)” passando um estado como parametro do meu servlet que tbm esta ai em anexo, que chama o método “listarCidade(ïnt estado)” que crio no meu dao…CidadeDAO, para listar as cidades do banco.

listarCidades(int estado) do servlet:

public String listarCidades(int estado) throws SQLException{
        String listaCidade = null;
        CidadeDAO cidadeDao = new CidadeDAO();
        listaCidade = cidadeDao.listarCidade(estado);
        return listaCidade;
    }

listarCidade(int estado) do meu DAO:

public String listarCidade(int estado) throws SQLException{
        
        Connection con = getConnection();
        String sql = "SELECT t1.id , t1.nome FROM MIQL.CIDADE t1 WHERE t1.id_estado = ? ORDER BY t1.nome";
        PreparedStatement stmt = con.prepareStatement(sql);
        stmt.setInt(1, estado);
        ResultSet rs = stmt.executeQuery(sql);        
        List<Cidade> cidades = new ArrayList<Cidade>();
       
        StringBuffer sb = new StringBuffer();
        sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<root>\n");
        
        while(rs.next()){
            Cidade cidade = new Cidade();
            cidade.setId(rs.getInt("ID"));
            cidade.setNome(rs.getString("NOME"));
            cidades.add(cidade);
            
            sb
                .append("<cidade>\n")
                .append("<id value=\"")
                .append(cidade.getId()).append("\" />\n")
                .append("<nome value=\"")
                .append(cidade.getNome()).append("\" />\n")
                .append("<selected value=\"")
                .append((cidade.getId() == cidade.getId() ? "1" : "0"))
                .append("\" />\n")
                .append("</cidade>\n");

        }
        sb.append("</root>\n");				
				
        return sb.toString();    
        
    }

Espero que alguém possa me ajudar.

Abraço.

1 Resposta

D
amigo boa noite, pra que tudo esse script, somente use esse javascript

<script type=“text/javascript” src=“<a href="http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js">http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js</a>”></script>

<script type=“text/javascript”>

window.onload = function() {

new dgCidadesEstados(

document.getElementById(‘estado’),

document.getElementById(‘cidade’),

true

);

}

</script>

//-- para chamar a função acima

<body>

<form>

<fieldset>

<label>Estado</label>:<select id=“estado” name=“estado”></select>

<label>Cidade</label>:<select id=“cidade” name=“cidade”></select>

</fieldset>

</form>

</body>
Criado 30 de julho de 2009
Ultima resposta 26 de nov. de 2009
Respostas 1
Participantes 2