Carregar Combobox de cidades por estado

5 de agosto de 2012 7 respostas

hfk 5 de agosto de 2012

Ola mais uma vez a todos do forum.

Galera to com um probleminha e gostaria que alguem pudesse me dar uma ajudinha nem que seja somente indicando um link.
Em uma aplicação que estou fazendo preciso de carregar em um combobox B todas as cidades do estado que foi selecionado no
combobox A, ja tenho todas as cidades e estados cadastrado certinho, mas nao estou compreendendo como posso fazer para carregar dinamicamente o combobox de cidades, sei que o caminho é javascript, possivelmente atraves do evento onChange do combo de estado, mas os exemplos que achei na net nao foram bem explicativos.
Alguem poderia me dar uma esclarecida nesta stiuação ? Se pelo menos me indicarem um link bom que expliquei direitinho mesmo sendo em ingles, ja esta de bom tamanho.
Estou usando vraptor 3.

Obrigado a todos.

7 Respostas

almircampos 6 de ago. de 2012

Olá, hfk.

Se você não tiver restrições quando a usar o jQuery, posso dar uma sugestão.

Sds,
Almir.

hfk 6 de ago. de 2012

nenhuma restrição meu amigo, aceito qualquer sugestao, obrigado

hfk 6 de ago. de 2012

Ola mais uma vez pessoal, tentei alguns exemplos que encontrei na net e o que mais se aproximou do que eu pretendo fazer é
um jquery deste tipo, mais alguem se habilita a me dar uma maozinha???

estou usando este js no meu jsp, porem nao funciona:

<script type="text/javaScript">
        function carregarCidades(estado){
        $.getJSON(<c:url value="/imovel/carregaCidadesPorEstado?codigoEstado=${estado}"/>,
            function(data){  
                for (var i = 0; i < data.length; i++){  
                      str = str + '<option value="'+data[i].codigo+'">'+data.descricao+'</option>';  
                }     
            $('#pCid').html(str);  
            }
        );
        }
    </script>

<td style="text-align: right;">Estado:</td> 
	<td>
        <select name="pEst" id="pEst" onchange="carregarCidades(pEst.value)">
            <option value="0">teste</option>    
             <option value="13">MG</option>                
        </select>
    </td>
                
    <td style="text-align: right;">Cidade:</td>
    <td>
        <select name="pCid" id="pCid"></select>
    </td>

No meu controller estou usando este metodo para me retornar os dados das cidades em formato json.

//retornando cidades no formato json para ser carregado
    @Path("/imovel/carregaCidadesPorEstado.Json")
    public void carregaCidadesPorEstadoJson(String q){
        int codEst = Integer.parseInt(q);
        this.result.use(json()).from(this.cidade.recuperaCidade_PorEstado(codEst)).serialize();           
    }

E este é meu dao :

public ArrayList<Cidade> recuperaCidade_PorEstado(int estado) {
        String sql = "select * from cidade where cod_estado = ?";
        Cidade cidade = null;
        ArrayList<Cidade> lista = new ArrayList<Cidade>();
		Connection con = ConexaoJava.getConection();
        try {
            PreparedStatement pstm = con.prepareStatement(sql);
            pstm.setInt(1, estado);
            ResultSet rs = pstm.executeQuery();
            while (rs.next()) {
				cidade = new Cidade();
                cidade.setCodigo(rs.getInt("cod_cidade"));
                cidade.setDescricao(rs.getString("nom_cidade"));
                cidade.setEstado(new Estado().recuperaEstado_PorCodigo(rs.getInt("cod_estado")));
				lista.add(cidade)
            }
            pstm.execute();
            pstm.close();
            return lista;
        } catch (Exception ex) {
            return null;
        }
    }

se alguem puder me ajudar agradeço muito, aceito qualquer dica que me ajuda a fazer esta funcionalidade!

obrigado a todos !

wagnerfrancisco 6 de ago. de 2012

Está dando algum erro? Uma dica, use as ferramentas de debug do seu navegador para verificar o que acontece quando você envia a requisição. No Chrome é só apertar Ctrl + Shift + J. Na aba Network, por exemplo, você pode ver a requisição sendo enviada e a resposta.

Em relação ao seu código, me parece que você está enviando uma requisição para “/imovel/carregaCidadesPorEstado” e o seu controller é “/imovel/carregaCidadesPorEstado.Json”. O nome deve ser o mesmo. Você pode passar os parâmetros “?codigoEstado=${estado}” num objeto separado, o próprio jquery vai ajustar ele na requisição.

Fora isso recomendo debugar e informar-nos o erro que ocorre.

hfk 8 de ago. de 2012

Ola pessoal !

Seguindo os conselhos do nosso amigo wagnerfrancisco, ajustei o nome do metodo que retorna a lista de cidade no meu controller e fiz um debug usando google chrome, para minha surpressa o console do google chrome nao me reporta erros, e ate consegui visualizar as cidades em formato json no debug, mas o problema e que ainda sim as cidades nao estao sendo populadas no jsp, acho que o problema esta no meu js, mas nao sei o que, se algum puder me ajudar agradeço.
Obrigado a todos que já ajudaram. !!!

meu jsp esta assim:

<script type="text/javascript" src="<c:url value="/javascripts/jquery-1.7.2.js"/>"></script>

<ul id="navMenu">

    <script type="text/javaScript">
   $(document).ready(function(){
            $('#pEst').change(function(){
                $.get('<c:url value="/imovel/carregaCidadesPorEstado/"/>' + this.value, function(resposta){
                    popularCidades(resposta); 
                });
            });
        })
        
        function popularCidades(resposta){
            var str = "";
            for (var i = 0; i < resposta.length; i++){  
                str = str + '<option value="'+resposta[i].codigo+'">'+resposta[i].descricao+'</option>';  
            }     
            $('#pCid').html(str);  
        }
    </script>		

</script>


<form action="<c:url value="/imovel/consultaSimples"/>" method="post">

      <table>
        <tr>
            <td style="text-align: right;">Finalidade:</td>
            <td>
                <select name="pFin" id="pFin">
                    <option value="Aluguel">Aluguel</option>
                    <option value="Venda">Venda</option>
                </select>
            </td>

            <td style="text-align: right;">Estado:</td>
            <td>
                <select name="pEst" id="pEst">
                    <option value="0">teste</option>    
                    <option value="13">MG</option>                
                </select>
            </td>

            <td style="text-align: right;">Cidade:</td>
            <td>
                <select name="pCid" id="pCid">

                </select>
            </td>

            <td style="text-align: right;">Preco ate :</td>
            <td><input type="text" name="pPreco"  /></td>
            <td><input type="submit" value="pesquisar"/></td>
        </tr> 
    </table> 
</form>

<div style="text-align: right;">
</div>

</ul>

meu controler esta assim:

//retornando cidades no formato json para ser carregado
    @Path("/imovel/carregaCidadesPorEstado/{q}")
    public void carregaCidadesPorEstado(String q){
        int codEst = Integer.parseInt(q);
        this.result.use(json()).from(this.cidade.recuperaCidade_PorEstado(codEst)).serialize();           
    }

meu dao esta assim:

public ArrayList<Cidade> recuperaCidade_PorEstado(int estado) { String sql = "select * from cidade where cod_estado = ?"; Cidade cidade = null; ArrayList<Cidade> lista = new ArrayList<Cidade>(); Connection con = ConexaoJava.getConection(); try { PreparedStatement pstm = con.prepareStatement(sql); pstm.setInt(1, estado); ResultSet rs = pstm.executeQuery(); while (rs.next()) { cidade = new Cidade(); cidade.setCodigo(rs.getInt("cod_cidade")); cidade.setDescricao(rs.getString("nom_cidade")); cidade.setEstado(new Estado().recuperaEstado_PorCodigo(rs.getInt("cod_estado"))); lista.add(cidade); } pstm.execute(); pstm.close(); return lista; } catch (Exception ex) { return null; } }

wagnerfrancisco 8 de ago. de 2012

Você chegou a imprimir a variável str depois de montada, pra ver se está tudo certo? Caso não estiver, imprima dentro do for pra ver o que acontece.

almircampos 15 de ago. de 2012

Amigos,

Desenvolvi um exemplo utilizando JSP, JSTL, jQuery, Ajax e VRaptor, para ilustrar o assunto do tópico. Obviamente, é um exemplo puramente didático que só deve ser utilizado para as finalidades deste tópico do fórum.

Os fontes estão no arquivo anexo (no formato do NetBeans) e uma versão funcional (sugiro utilizar o Firefox) pode ser temporariamente encontrada em http://zona8.com.br/exemploGUJCidadeEstado.

Caso haja necessidade de mais explicações, podemos continuar a discussão aqui.

Abraços,
Almir.

Criado 5 de agosto de 2012

Ultima resposta 15 de ago. de 2012

Respostas 7

Participantes 3

7 Respostas

Topicos relacionados