Discussoes de Programacao e Tecnologia

Vraptor + <select> + json

20 respostas
C
cvinicios

olá pessoal

estou com dificuldades em relação a json quero fazer uma consulta no banco de dados e retornar as divisões de um estado e outra para retornar as cidades de uma divisão mas inserir esses dados em um select, como eu faço isso usando o vraptor 3?

formulario.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</script>

</head>
<body>
	<form action="<c:url value="/cidade/novo"/>" method="post">
	<fieldset>
		<legend>Cadastro de Cidades</legend>
		
		<label>Estado</label>
		<select name="sestado">
			<c:forEach var="estado" items="${estado}">
				<option value="${estado.id}"
				<c:if test="${sestado.id == estado.id}">selected="true"</c:if>>
					${estado.nome}</option>
			</c:forEach>
		</select>
		
		<label>Divisão</label>
		<select name="sdivisao">
			....
		</select>
		
		<label>Cidades</label>
		<select name="scidades">
			....
		</select>
		
	</fieldset>
	</form>
</body>
</html>

cidadeController.java

package smcv.controller;

import java.util.List;

import br.com.caelum.vraptor.Get;
import br.com.caelum.vraptor.Path;
import br.com.caelum.vraptor.Post;
import br.com.caelum.vraptor.Resource;
import br.com.caelum.vraptor.Result;
import br.com.caelum.vraptor.view.Results;
import br.com.caelum.vraptor.view.Results.*;
import br.com.caelum.vraptor.Validator;
import smcv.dao.CidadeDao;
import smcv.dao.DivisaoDao;
import smcv.dao.EstadoDao;
import smcv.modelo.area.Cidade;
import smcv.modelo.area.Estado;

@Resource
public class CidadeController {

	private CidadeDao dao;
	private DivisaoDao ddao;
	private Result result;
	private Validator validator;
	private EstadoDao edao;

	public CidadeController(CidadeDao dao, DivisaoDao ddao, EstadoDao edao,Result result, Validator validator)
	{
		this.dao = dao;
		this.ddao = ddao;
		this.result = result;
		this.validator = validator;
		this.edao = edao;
	}
	
        .
        .
        .
	
	@Get
	@Path("/cidade/carregadivisao/{estado}")
	public void carregaDivisao(Estado estado){
	//	result.use(Results.json()).from(ddao.listaPorEstado(estado)).exclude("estado","divisao").serialize();
	}
}

vlw

Alura O que são algoritmos e lógica de programação e como aprender? Entenda o que são algoritmos e lógica de programação e qual é a importância desses conceitos para começar a programar

20 Respostas

Lucas_Cavalcanti
Lucas_Cavalcanti

vc vai fazer isso via ajax, certo?
descomente a linha do result.use(json()), e faça isso no seu html:

  • coloque ids no select de divisões e de estados:
<select id="estados" name="sestado">
...
<select id="divisoes" name="sdivisao">
  • inclua o jquery na sua página (javascript)
  • no começo da página faça algo do tipo, dentro de um bloco script
$(function() {
    $('#estados').click(function() {
        var value = //pega o cara selecionado
        var json = $.getJSON('<c:url value="/cidade/carregadivisao/"/>' + value);
        var divisoes = json.list;
        for (var i in divisoes) {
            //cria uma nova option com nome e valor:
            var option = $('<option value="' + divisoes[i].codigo + '">' + divisoes[i].nome + '</option>');
             //adiciona na combo de divisões
            option.appendTo('#divisoes');
           
        }
    });
});

algo assim

C
cvinicios

Lucas, vlw pela dica mas continuo com problemas

olha como ficou

<script type="text/javascript">
	$(function getdivisao(){
		$('#estado').change(function(){
			//pega o valor do combo selecionado
                        var value = document.getElementById("estado").value;
			var json = $.getJSON('<c:url value="/cidade/carregadivisao/"/>'+value);
			var divisoes = json.list;
			for(var i in divisoes){
				var option = $('<option value="' + divisoes[i].id + '">' + divisoes[i].nome + '</option>');
				option.appendTo('#divisao');
			}
		});
		
	});
</script>

o problema esta aqui, o javascript passa uma string com um simbolos junto por exemplo: Rio%20Grande%20do%20Sul, tem como passar um objeto estado? ou existe outra forma de fazer isso?

@Get
	@Path("/cidade/carregadivisao/{estado}")
	public void carregaDivisao(String estado){
		
        result.use(Results.json()).from(ddao.listaPorEstado(edao.getEstado(estado))).serialize();
	}

edao.getEstado(estado) - busca o objeto estado pelo nome - aqui ferra tudo por causa dos simbolos e acentuação

ddao.listaPorEstado(...) - busca as divisões

t+

Lucas_Cavalcanti
Lucas_Cavalcanti

mas tá vindo os símbolos no banco de dados ou no json?

C
cvinicios

não, o javascript que coloca, no banco esta correto

Lucas_Cavalcanti
Lucas_Cavalcanti

troca o var value por:

var value = $('#estado option:selected').val();

acho que isso funciona

do jeito que vc tinha feito, ele pega o texto selecionado no combo, não o valor da option

C
cvinicios

ele mostra o numero do indice

Lucas_Cavalcanti
Lucas_Cavalcanti

não é o estado.id que ele tá mostrando?

C
cvinicios

não, é uma sequencia apartir do 20,

Lucas_Cavalcanti
Lucas_Cavalcanti

tenta trocar pra:

var value = $('#estado option:selected').attr('value');
C
cvinicios

lucas agora ta funcionando parcialmente, rsrsrs

olha o código

<script type="text/javascript">
	$(function getdivisao(){
		$('#estado').change(function(){
			var value = $('#estado').val();
			var json = $.getJSON('<c:url value="/cidade/carregadivisao/"/>'+value);
			var divisoes = json.list;
			for(var i in divisoes)
			{
				alert(divisoes[i].nome);
				var option = $('<option value="' + divisoes[i].id + '">' + divisoes[i].nome + '</option>');
				option.appendTo('#divisao');
			}
		});
		
	});
</script>

@Get
	@Path("/cidade/carregadivisao/{estado}")
	public void carregaDivisao(Long estado){
		Estado e = edao.getEstado(estado);
		result.use(Results.json()).from(ddao.listaPorEstado(e)).serialize();
	}

ele ta buscando no banco corretamente e não está dando erro, mas não esta exibindo no combobox,

falta alguma coisa aqui?

<label>Divisão</label>
     	<select id="divisao" name="sdivisao">
     	
     	</select>
Lucas_Cavalcanti
Lucas_Cavalcanti

troca o

option.appendTo('#divisao');

por

$('#divisao').append(option);
C
cvinicios

não deu certo não

Lucas_Cavalcanti
Lucas_Cavalcanti

os alerts tão funcionando?

C
cvinicios

também não

mas a consulta esta sendo realizada

13:46:40,296 DEBUG Printer:113 - smcv.modelo.area.Estado{id=20, uf=SP, nome=São Paulo}
*******************************
13:46:40,296 DEBUG Printer:113 - smcv.modelo.area.Divisao{divisao=DIR II, id=2, estado=smcv.modelo.area.Estado#20, nome=Divisão Marília}
13:46:40,296 DEBUG Printer:113 - smcv.modelo.area.Divisao{divisao=DIR I, id=1, estado=smcv.modelo.area.Estado#20, nome=Divisão de São Paulo}
*********************************
13:46:40,296 DEBUG JDBCTransaction:147 - committed JDBC Connection
13:46:40,296 DEBUG ConnectionManager:427 - aggressively releasing JDBC connection
13:46:40,296 DEBUG ConnectionManager:464 - releasing JDBC connection [ (open PreparedStatements: 0, globally: 0) (open ResultSets: 0, globally: 0)]
Lucas_Cavalcanti
Lucas_Cavalcanti

tenta acessar a url que deveria acessar o json e posta aqui o que retornou…

provavelmente vai pedir pra vc fazer o download de um arquivo

C
cvinicios

conteudo

{"list": [
  {
    "id": 1,
    "divisao": "DIR I",
    "nome": "Divisão de São Paulo"
  },
  {
    "id": 2,
    "divisao": "DIR II",
    "nome": "Divisão Marília"
  }
]}
Lucas_Cavalcanti
Lucas_Cavalcanti

Ok, vamos tentar outro:

<script type="text/javascript">
	$(function(){
		$('#estado').change(function(){
			var value = $('#estado').val();
                        $.ajax({
                            url: '<c:url value="/cidade/carregadivisao/"/>'+value,
                            dataType: 'json',
                            success: function(json) {
			        var divisoes = json.list;
			        for(var i in divisoes)
			        {
				     alert(divisoes[i].nome);
				     var option = $('<option value="' + divisoes[i].id + '">' + divisoes[i].nome + '</option>');
				     option.appendTo('#divisao');
			        }
                            }
                        });
		});
	});
</script>
C
cvinicios

agora funcionou, só a acentuação que ficou com um simbolo mas eu removo elas

vlw Lucas
T+

C
cvinicios

só mais uma pergunta

tem como limpar o combobox antes de carregar?

Lucas_Cavalcanti
Lucas_Cavalcanti 
$('#divisao option').delete(); // ou remove, não lembro
Criado 9 de março de 2010
Ultima resposta 10 de mar. de 2010
Respostas 20
Participantes 2

Topicos relacionados

Componente de forum 4 respostas Consultar CPF pelo nome na Receita Federal 5 respostas Pegadinhas que se fazem com os pobres estagiários 62 respostas [Resolvido] Como comparar Strings em C? 6 respostas Converter pixels para centímetros 9 respostas
Casa do Codigo Casa do Codigo — Livros de tecnologia Livros de programacao, infraestrutura e inovacao
Lumina Lumina: a IA que te traz resultados Prompts prontos por especialistas. Resolva seus problemas de verdade.